微信、支付宝、手机QQ等自带浏览器环境内左上角返回、关闭按钮事件监控及处理方法

最靠谱的方式是通过JS监控popstate事件,然后进行相应的处理。核心代码如下:

if (window.history && window.history.pushState) {
    //document.addEventListener('visibilitychange', function() {
    //    alert(document.visibilityState);
    //}, false);
    //window.on('popstate', function() {
    //    alert("我监听到了浏览器的popstate");
    //});
    //window.onpopstate = function(e) {
    //    console.log(e.state);
    //
    //};
    $$(window).on('popstate', function() {  // 返回按钮
        var hashLocation = location.hash;   // 获取或设置页面的标签值
        console.log("popstate");
        console.log("hashLocation:"+hashLocation);
        var hashSplit = hashLocation.split("#!/");
        var hashName = hashSplit[1];
        console.log("hashName:"+hashLocation);
        if (hashName !== '') {
            var hash = window.location.hash;    // 获取或设置页面的标签值
            console.log("hash:"+hash);
            if (hash === '') {
                alert('再次点击返回按钮退出程序');
            }
        }
    });
    console.log("pushstate");
    var url = window.location.href;
    var timestamp = new Date().getTime();

    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        window.history.pushState('forward', null, './#forward');
    } else {
        window.history.pushState('', "大糖医", url+"#"+timestamp); // 状态对象、标题(现在会被忽略),可选的URL地址。
    }
}

该处理方式在ios版本的微信上面,第一次进入会遇到不生效的问题。但是页面跳转之后,即生效。
可能由于popstate事件注册顺序or微信ios版本的初始后退按钮本质上为关闭按钮导致。
但是,在很大程度上可以处理用户误操作。

参考:
popstate的自动触发问题
https://my.oschina.net/u/3118385/blog/802997
HTML5之pushstate、popstate操作history,无刷新改变当前url
http://frontenddev.org/article/html-5-pushstate-popstate-operating-history-no-refresh-to-change-the-current-url.html
为什么微信内置浏览器回退后100%触发popstate事件?
https://www.zhihu.com/question/53836068
微信自带浏览器环境内左上角返回、关闭按钮事件监控?
https://www.zhihu.com/question/40511430/answer/126990822
监听微信、支付宝等移动App等内置浏览器返回(后退)等事件的方法
http://www.cnblogs.com/Casey-Tech-Share/articles/5888566.html
window.location.hash属性介绍
http://www.cnblogs.com/china-aspx/archive/2008/04/20/1162597.html
WebAPI接口window.onpopstate
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/onpopstate
事件类型一览表popstate
https://developer.mozilla.org/zh-CN/docs/Web/Events/popstate
微信浏览器左上角回退按钮点击了事件能获取到吗
http://bbs.csdn.net/topics/391023147
js获取浏览器返回按钮事件
http://blog.csdn.net/genziisme/article/details/54405658
《解决微信内置浏览器返回上一页强制刷新问题方法》
http://www.cnblogs.com/likar/p/5644424.html
javascript怎么禁用浏览器后退按钮
http://www.jb51.net/article/48508.htm
js实现对Android设备物理返回键单击/双击事件处理(Framework7框架)
http://blog.csdn.net/fxp850899969/article/details/53322857
Html5 onpopstate 事件禁止手机设备上的返回操作
http://blog.csdn.net/ml01010736/article/details/50372476
微信内置浏览器,点击返回强制重新加载前一个页面的问题。
https://segmentfault.com/q/1010000004468578

欢迎关注我的微信公众号:

 

如无特殊说明,文章均为本站原创,转载请注明出处!

发表评论

邮箱地址不会被公开。 必填项已用*标注