微信内置浏览器点击“返回”关闭窗口

场景：开发微信内的H5活动，需要进行微信授权，我们采用的是在一个静态页面（只有js，所以是个空白页面）内进行授权，授权后再跳转到活动主页。

客户需求：从活动主页返回时不显示这个授权页面（空白页面），直接退出。

解决方案：（方案一为踩过的坑；方案二为放在前端处理的方案）

方案一：（不可行）

直接监听需要关闭窗口的页面的返回事件来关闭窗口。示例代码：

1 pushHistory();2         window.addEventListener("popstate", function(e) {3             WeixinJSBridge.call('closeWindow');4         }, false);5         functionpushHistory() {6             var state ={7                 title: "title",8                 url: "#"
9 };10             window.history.pushState(state, "title", "#");11         }

此方案存在的bug：在微信内置浏览器内该事件会继承到子页面（需要关闭窗口的页面为主页面，在主页面跳转到的其他页面称为子页面），在子页面点击返回也会关闭窗口。（暂未找到原因所在，如有大牛解决，欢迎留言指导~）

方案二：（可行）

在方案一的基础上优化，加入session判断当前页面是否为需要关闭窗口的页面。示例代码：

1 　　　　 sessionStorage.setItem('key', 1);

　　　　　　 pushHistory();2         window.addEventListener("popstate", function(e) {3             if(sessionStorage.getItem('key') != 1) {4                 sessionStorage.setItem('key', 1);5 }6             if(sessionStorage.getItem('key') == 1) {7                 document.addEventListener('WeixinJSBridgeReady', function(){ WeixinJSBridge.call('closeWindow'); }, false);8                 WeixinJSBridge.call('closeWindow');9                 parent.WeixinJSBridge.call('closeWindow');//网上有人认为微信内置浏览器和本地开发测试的环境不一样，微信内部是采用iframe方式加载页面的（暂未得到考证），所以我采用了两种方式都写的兼容写法
10 }11
12         }, false);13         functionpushHistory() {14             var state ={15                 title: "title",16                 url: "#"
17 };18             window.history.pushState(state, "title", "#");19         }

思路：将主页面（需要关闭窗口的页面）的key值设为1，子页面（从主页面跳转到的其他页面）的key值设为其他任意值，判断key值是否为1，为1的时候点击返回再关闭窗口。（注意：每次进到主页面的时候都要将key值重置为1。　　　因为session的生命周期是当前窗口，从其他页面子页面回到主页面会改变key）方案三：（替换方案）在授权页面加入活动方的宣传广告，避免空白。方案四：（最优方案）微信授权放在后台进行，这样就不会存在这个授权页面，也就不用去考虑会出现空白的问题了。

更多专业前端知识，请上【猿2048】www.mk2048.com

微信内置浏览器点击“返回”关闭窗口相关推荐

cocoscreator实现微信内置浏览器点击图片识别图中二维码
最近在做一个微信内置浏览器的小游戏,小游戏中有一个二维码,需要用户点击长按二维码弹出系统识别二维码按钮. 下面是解决步骤: 1.cocoscreator是如何实现在浏览器中渲染游戏画面的看图中箭头处 ...
html微信内置浏览器点击图片放大，双指缩放，附源码（自测可用）
本人用的是vue框架引用微信的JS <script type="text/javascript" src="http://res.wx.qq.com/open/j ...
微信内置浏览器缓存清理及关闭
安卓清除缓存方案 android版微信内置浏览器(X5内核) 在安卓版微信内打开链接 http://debugx5.qq.com 拉到调试页面的最底端,勾选上所有的缓存项目,点击清除. 苹果清除缓存方 ...
微信内置浏览器无法打开APP下载链接的解决方案
最近遇到一个问题,app用户邀请好友,分享到微信好友,但是微信好友打不开对应的app下载链接.然后ui给我做了个图,引导用户点击浏览器右上角,在外部浏览器中打开app下载页,如下图: 但是我又遇到问题 ...
html5 微信返回按钮,《解决微信内置浏览器返回上一页强制刷新问题方法》(示例代码)...
微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验.而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的 ...
微信android返回上一页位置,解决微信内置浏览器返回上一页强制刷新问题方法...
微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验.而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的 ...
weixin公众号页面返回上一层_《解决微信内置浏览器返回上一页强制刷新问题方法》...
微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验.而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的 ...
微信html开发返回刷新页面,解决微信内置浏览器返回上一页强制刷新问题方法...
微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验.而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的 ...
《解决微信内置浏览器返回上一页强制刷新问题方法》
<解决微信内置浏览器返回上一页强制刷新问题方法> 参考文章: (1)<解决微信内置浏览器返回上一页强制刷新问题方法> (2)https://www.cnblogs.com/li ...

微信内置浏览器点击“返回”关闭窗口

微信内置浏览器点击“返回”关闭窗口相关推荐

最新文章

热门文章