popstate的自动触发问题

前段时间，因为项目需要，需要监听微信的返回按钮，于是用到了HTML5中的popstate，作为history系列中的事件，popstate在微信中存在这样一个问题："当页面被加载的时候，popstate会立即被触发，从而导致页面返回到上一级页面"。而根据官方文档对popstate的描述，只要访问历史记录就会触发popstate。而传统的History中访问页面和生产历史记录是同时的。在webkit（X5 blink）中，无论是刷新还是访问一个新网页都会触发popstate。

解决方案有两种： 

方案一： 

设置延迟时间：

function GoBack(e) {
    this.init(e);
}
GoBack.prototype = {
    constructor: GoBack,
    init: function (url) {
        this.pushHistory();
        var bool = false;
        setTimeout(function(){
            bool = true;
        },1000);
        window.addEventListener("popstate", function() {
            if(bool) {
                //这里填写具体的动作
            }
            this.pushHistory();//出栈

        }, false);
    },
    pushHistory: function () {
        var state = {
            title: "title",
            url: "#"
        };
        window.history.pushState(state, "title", "#");
    }
}
export default GoBack;

设置延迟的=有一个弊端，你要执行的具体动作要等延迟时间过了才可以，各种手机所需延迟时间长短不同，延迟设置的过低，会立即触发你要执行的动作，设置的过高，这段时间内你要执行的动作都不会被触发。（例如返回键失灵）。

方案二：

function GoBack(e) {
    this.init(e);
}
GoBack.prototype = {
    constructor: GoBack,
    init: function (url) {
        this.pushHistory();
        window.addEventListener('load', function() {     
            setTimeout(function() {       
               window.addEventListener('popstate', function() {        
               //要执行的具体动作      
               });     
            }, 0);   
         })
    },
    pushHistory: function () {
        var state = {
            title: "title",
            url: "#"
        };
        window.history.pushState(state, "title", "#");
    }
}
export default GoBack;

第二种方案没有设置通过把页面加载完成后第一次触发的popstate事件屏蔽，来避免popstate马上执行。这中方案自己还没试过，貌似可行！

转载于:https://my.oschina.net/u/3118385/blog/802997