js监听浏览器后退事件

最近需求需要,需在浏览器(web 和 h5手机端)实现回退弹框

网上很少找到这个需求,找到的也是有bug的,最后解决了,分享一下问题和解决方案

用到的函数:window.history.pushState

网上有个方法测试了一下:

$(document).ready(function(e) { 
            var counter = 0;
            if (window.history && window.history.pushState) {
                             $(window).on('popstate', function () {
                                            window.history.pushState('forward', null, '#');
                                            window.history.forward(1);
                                          alert("不可回退");
                                });
              }

              window.history.pushState('forward', null, '#'); //在IE中必须得有这两行
              window.history.forward(1);
});

有一个bug就是手机上面不能正常的弹框

在网上找了一下问题,分享文章:popstate事件在webkit中的诡异行为

解决方法:设置了一个siteTimeout,本人刚测试的时候,设置了一个setTimeout=1也不知道为什么还是无效,于是把时间改成了1000,可以正常弹框了.(不过是为什么会有这个原因,具体还没有查到,因为有的设置1是可以正常弹框了,有知道为什么的可以告知一下)

我的解决方案的js:

"pushState" in window.history && (
        window.history.pushState({
            title: document.title,
            url: location.href
        }, document.title, location.href),
            setTimeout(function () {
                window.addEventListener("popstate", function (a) {
                    var is_guest = ;
                    if (is_guest == 1) {
                        $('.pop_UpLevel').show(); //弹框的需求
                    } else {
                        $('.pop_more').show();
                    }
                    return false;
                })
            }, 1000)
    );

问题:用这个方法,就是每次点击别的弹框,也会出现后退的这个弹框的需求(本人未解决,所以用了一个比较笨的方法,就是每次别的样式的弹框都对退后的弹框hide,有点笨,但是解决了问题)

嘻嘻,如果有上面2个问题的解决方案的牛牛,也告知一下我,互相学习一下,谢谢啦~~~~~~