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 = <?php echo $is_guest;?>;                    if (is_guest == 1) {                        $('.pop_UpLevel').show(); //弹框的需求                    } else {                        $('.pop_more').show();                    }                    return false;                })            }, 1000)    );

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

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