js监听浏览器后退事件 - Angular4

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

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

用到的函数:window.history.pushState

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

[javascript]view plain copy 
$(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:

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