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个问题的解决方案的牛牛,也告知一下我,互相学习一下,谢谢啦~~~~~~