IOS微信浏览器返回事件popstate监听

问题：

通过监听 popstate 事件，来判断是否点击返回按钮，比如从A页面跳转到B页面（监听popstate），然后再跳转到C页面，点击返回的按钮，测试成功，包括安卓版，但是问题来了，IOS版的微信，是会立即触发popstate事件，导致直接从C页面跳转到A页面，其他的支付宝（安卓、IOS）、微信（安卓）都是可以，就是微信IOS版不行。

经过查找相关资料，选择了一个方法，不过有点弊端，但是并不影响操作，通过popstate、pageshow两个事件进行判断验证。

/** 
 * 浏览器回退事件监听 
 */  
var listenerBackHandler = {  
    param: {  
        isRun: false, //防止微信返回立即执行popstate事件  
    },  
    listenerBack: function () {  
        var state = {  
            title: "title",  
            url: "#"  
        };  
        window.history.pushState(state, "title", "#");  

        window.addEventListener("popstate", function (e) {  
            if (listenerBackHandler.param.isRun) {  
                    window.location.href = "Home/Index"; //返回到主页  
                }  
            }  
        }, false);  
    },  
    //初始化返回事件  
    initBack: function () {  
        window.addEventListener('pageshow', function () {  
            listenerBackHandler.param.isRun = false;  
            setTimeout(function () { listenerBackHandler.param.isRun = true; }, 1000); //延迟1秒 防止微信返回立即执行popstate事件  
            listenerBackHandler.listenerBack();  
        });  
    }  
}

原理：
因为在IOS微信浏览器里，返回上一个页面时，必定会触法popstate事件，就会导致立即执行返回到A页面。通过pageshow事件先延迟1秒的事件，让执行popstate事件时无法返回，等定时器把isRun的值改成true，然后再点击返回按钮，就会再次执行popstate事件，就可以返回到你想要的页面。

弊端：
就是如果有人手速太快，返回到B页面就立即点击返回按钮，此时出现点击没有反应，再次点击就能返回，给人的感觉好像没有点击到返回按钮，这个概率还是很小。

附属资料：（下面是W3Chool对popstate的描述）

popstate事件

每当同一个文档的浏览历史（即history对象）出现变化时，就会触发popstate事件。

需要注意的是，仅仅调用pushState方法或replaceState方法，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，或者使用JavaScript调用back、forward、go方法时才会触发。另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。

使用的时候，可以为popstate事件指定回调函数。这个回调函数的参数是一个event事件对象，它的state属性指向pushState和replaceState方法为当前URL所提供的状态对象（即这两个方法的第一个参数）。

window.onpopstate = function (event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
};

// 或者

window.addEventListener('popstate', function(event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
});

上面代码中的event.state，就是通过pushState和replaceState方法，为当前URL绑定的state对象。

这个state对象也可以直接通过history对象读取。

var currentState = history.state;

注意，页面第一次加载的时候，在load事件发生后，Chrome和Safari浏览器（Webkit核心）会触发popstate事件，而Firefox和IE浏览器不会。

转载自：https://blog.csdn.net/sinat_37138973/article/details/79098763