js监听手机物理键返回，并解决ios返回立即执行popstate事件的问题

需求

有时候我们在做项目时会碰到这样的场景：

返回时到指定的页面，而不是按历史返回

但是我们无法阻止用户的行为，用户是有可能会点击浏览器的返回键或者手机物理返回键返回的。

解决思路

使用popstate事件监听返回

pushHistory();
window.addEventListener("popstate", function(e) {     
    window.location.href = 'http://www.baidu.com';      //假设返回跳转到百度
}, false);
function pushHistory(){    
    var state = {      
        title: "title",         
        url: "#"    
    };     
    window.history.pushState(state, "title", "#"); 
}复制代码

注意：上面的办法在pc和安卓上都没有问题的，但是在ios上有个问题，ios返回会立即执行popstate事件

ios返回立即执行popstate事件的解决办法

页面A -> B ->C , 页面B返回时需要返回到指定页面，比如跳到百度。

问题描述：

 ios上，页面C返回时，立即执行了popstate事件，导致直接跳转到百度了。

解决方法：

通过pageshow事件处理

var bool = false; //定义一个变量  
  
window.addEventListener('pageshow', function () {            
    bool = false;            //进入页面时bool置为false，防止ios立即执行popstate        
    setTimeout(function(){   //定时器延迟将bool置为true            
        bool = true;        
    },500)    
});    

pushHistory();    
window.addEventListener("popstate", function(e) {         
    if(bool){            
        window.location.href = 'http://www.baidu.com';         
    };    
}, false);    

function pushHistory(){        
    var state = {             
        title: "title",             
        url: "#"       
    };         
    window.history.pushState(state, "title", "#");     
}复制代码

转载于:https://juejin.im/post/5cb587b7f265da03705fac68