美文网首页
微信端返回按钮监听处理

微信端返回按钮监听处理

作者: wangjie_Austin | 来源:发表于2017-12-12 23:51 被阅读0次

    微信端监听‘返回’事件

    下面的方法是在移动端实现的,在微信的浏览器中beforeunload等是被阉割掉的,所以用不了。
    而下面的方法存在的问题是:当前页面通过点击事件进入下级页面后,再返回到当前页会直接触发popstate事件,也就意味着会直接弹出confirm,并且当你点击‘确认’的时候,需要点击多次才能返回。出现这两个问题的原因是:
    1、popstate事件不可被移除,当你从子页面返回的时候,popstate会被触发(ios并不会刷页面),并且执行
    2、子页面返回会往history栈中添加一条历史记录,所以在返回的时候不会跳转回去,并且因为当前页面重写了pushState,所以会出现停留在当前页

    因此,这边进行的处理就是在页面加载后直接进行window.location.back();同时,对事件的执行进行延迟

    // 判断点击左上角返回
    $(document).ready(function (e) {
    // 最好写在页面加载请求的接口中
    if(window.location.hash === '#hash'){
        window.history.back();
    }
    pushHistory();
    
    let bool = false;
    setTimeout(function () {
        bool = true;
    }, 1500);
        window.addEventListener('popstate', function (e) {
           if(bool) {
                var cfi = confirm("确定要离开当前页面嘛?");
                if(cfi) {
                    window.history.back();
                }else{
                    document.write("You pressed cancel!")
                }
            }
        }, false);
        function pushHistory () {
            let state = {
                title: 'title',
                url: '#'
            };
            window.history.pushState(state, 'title', '#');
        }
    });
    

    附上,popstate是h5新出的api,还有用于监听hash的api叫hashchange,就是监听跟在#符号后面的URL部分,包括#符号变化,但是hashchange不管是back,还是forward都会触发。

    相关文章

      网友评论

          本文标题:微信端返回按钮监听处理

          本文链接:https://www.haomeiwen.com/subject/tjwqixtx.html