微信公众号H5关闭当前页面

1.问题说明:

    由于使用的是微信内置的浏览器所以常见的禁止返回的页面跳转的方式都不管用了,微信就是这么坑,微信就是这么坑,微信就是这么坑
例如:window.location.replace(),尽管你这样子写,但依然可以返回上个页面

2.错误方式

网上有不少小伙伴采用如下的方式:
WeixinJSBridge.call('closeWindow');

首先这种方式具有兼容性问题,必须如下写才能兼容苹果和安装:
document.addEventListener('WeixinJSBridgeReady', function() {
                    WeixinJSBridge.call('closeWindow');
                }, false);
WeixinJSBridge.call('closeWindow');
关闭的不是当前页面,而是整个浏览器,直接让你返回到公众号去

注意:为什么说他是错误的方式呢,其实也不完全是错的,人家只不过是关闭的比较彻底而已......

3.正确姿势

      首先呢我们换个角度思考一下问题,为什么要关闭当前页面呢???
      总之就是不想让用户在回到之前的 页面去了呗!!!
      那么,我们如果在微信的浏览器中禁止用户返回是不是就可以了呢.....
      果然还是我帅,废话不多说,上代码:
      //禁止网页返回上一页
      stopBack() {
        history.pushState(null, null, document.URL);
        window.addEventListener('popstate', function() {
            history.pushState(null, null, document.URL);
        });
      }
      //关闭整个浏览器
      back() {  
        document.addEventListener('WeixinJSBridgeReady', function() {
            WeixinJSBridge.call('closeWindow');
        }, false);
        WeixinJSBridge.call('closeWindow');
      }

注意:这样就可以实现用户不能左滑右滑返回上一页了,只能乖乖的点击按钮回到公众号主页消息中了.
以上纯属个人观点,如有不服,尽管怼!!!


1641565189(1).jpg
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容