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马上执行。这中方案自己还没试过，貌似可行！