微信自带浏览器对返回键的监听

最近的一个微信web项目,微信自带浏览器的返回键会对项目造成影响,自然而然得呗pm加了需求,在查阅一些列博客以后,找到了合理的解决方案,就目前我用的手机都还是兼容状态,下面放上方法:

$(function(){  
    pushHistory();  
    window.addEventListener("popstate", function(e) {  
        alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能  
}, false);  
    function pushHistory() {  
        var state = {  
            title: "title",  
            url: "#"  
        };  
        window.history.pushState(state, "title", "#");  
    }  
      
}); 


解释一下

popstate:      

当活动历史记录条目更改时,将触发popstate事件。如果被激活的历史记录条目是通过对history.pushState()的调用创建的,或者受到对history.replaceState()的调用的影响,popstate事件的state属性包含历史条目的状态对象的副本。

需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时,才会触发该事件,如用户点击浏览器的回退按钮(或者在Javascript代码中调用history.back())

不同的浏览器在加载页面时处理popstate事件的形式存在差异。页面加载时Chrome和Safari通常会触发(emit )popstate事件,但Firefox则不会。


这里的pushState是因为虽然我们监听到了返回事件,但是页面还是会返回上个界面,所以我们需要用pushState往history里增加url把原来链接取代,这样返回的时候就不会返回原来页面了,#代表的是当前页大家应该也都知道。




你可能感兴趣的:(微信自带浏览器对返回键的监听)