欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-03 22:53:51
场景:开发微信内的H5活动,需要进行微信授权,我们采用的是在一个静态页面(只有js,所以是个空白页面)内进行授权,授权后再跳转到活动主页。 客户需求:从活动主页返回时不显示这个授权页面(空白页面),直接退出。 解决方案:(方案一为踩过的坑;方案二为放在前端处理的方案) 方案一:(不可行) 直接监听需 ......

场景:开发微信内的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)
方案三:(替换方案)
在授权页面加入活动方的宣传广告,避免空白。
方案四:(最优方案)
微信授权放在后台进行,这样就不会存在这个授权页面,也就不用去考虑会出现空白的问题了。