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

2018-06-24 02:14:12来源：未知阅读 ()

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

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

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

方案一：（不可行）

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

 1 pushHistory();
 2         window.addEventListener("popstate", function (e) {
 3             WeixinJSBridge.call('closeWindow');
 4         }, false);
 5         function pushHistory() {
 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         function pushHistory() {
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）
方案三：（替换方案）
在授权页面加入活动方的宣传广告，避免空白。
方案四：（最优方案）
微信授权放在后台进行，这样就不会存在这个授权页面，也就不用去考虑会出现空白的问题了。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有