需求

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

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

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

解决思路

使用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事件

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

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

问题描述：

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

解决方法：

通过pageshow事件处理

解决方法：

通过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", "#");

}

当时遇到问题想了很多办法，最终用这个方法完美解决