a.场景一：直接进入一个A页面，然后点击微信返回按钮

代码如下：

window.addEventListener("popstate", function(e) {

WeixinJSBridge.call('closeWindow');

}, false);

预期：关闭页面，跳回进入之前的微信界面

实际结果：现象如预期，但是并没有监听到popstate。

原理：当浏览器做出动作导致历史记录发生变化时，才会触发popstate事件。

b.场景二：直接进入A页面，然后A页面中自动$state.go跳转到子页面B中，在B页面中点返回

代码如下：在父页面A中写入

window.addEventListener("popstate", function(e) {

WeixinJSBridge.call('closeWindow');

}, false);

预期：回到微信页面

实际结果：页面加载完B页面之后直接退回到微信页面

修改：增加标识位isFirst防止页面加载时history改变触发popstate

修改后代码如下：

$scope.isFirst=true;

window.addEventListener("popstate", function(e) {

if(!$scope.isFirst){

WeixinJSBridge.call('closeWindow');

}else{

$scope.isFirst=false;

}

}, false);

c.场景三：首先进入A页面，然后在A页面中通过window.location跳转到页面B，在B页面中点返回

代码如下：

window.addEventListener("popstate", function(e) {

WeixinJSBridge.call('closeWindow');

}, false);

预期：能进入监听，且成功返回微信页面

实际结果：触发监听，但返回A页面

修改代码后：

function pushHistory() {

var state = {

title: "title",

url: "#"

};

//state:与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数 window.history.pushState(state, "title", "#");

//添加这个记录之后，浏览器地址变为最新的地址，即在原先的URL末位加#，且history.length加1，浏览器后退返回原来的URL，页面内容不变}

pushHistory();

window.addEventListener("popstate", function(e) {

WeixinJSBridge.call('closeWindow');

}, false);

修改原理：因为popstate的监听原理是在做出浏览器动作时，才会触发，但是页面还是会返回到上一个页面，无法在B页面代码中操作。因此需要使用pushState增加一个本页的url，代表本页，用window.history.pushState给history压入一个本地的链接，当点击返回时，就进行监听，在监听代码中实现自己操作。

注意：调用history.pushState()或history.replaceState()不会触发popstate事件，只有在做出浏览器动作时，才会被触发，比如点击浏览器的返回按钮或者用JS调用history.back()等

在做微信公众号页面开发里，触发微信返回事件的时候有2个需求。

我现在大概的页面流程是页面a->页面b，在页面b操作数据，在页面b点击返回，会回到a页面并刷新。在页面a点击返回，直接退回到公众号页面。

所以我需要监听2个事件。1是监听a页面的返回事件，2是判断页面a是不是从上个页面返回来的。

监听返回事件可以利用history+popstate实现。

监听页面a 是不是从上个页面返回来的可以使用 window.performance.navigation.type 实现。

a页面的主要代码如下：

$(function() {

let pushStateBool = false;

//判断用户是不是通过后退按钮访问本页面的

window.addEventListener('pageshow', function() {

pushStateBool = false;

setTimeout(function() {

pushStateBool = true;

}, 1000) //延迟1秒 防止ios微信返回立即执行popstate事件，文末有解释

pushHistory();

if (event.persisted || window.performance && window.performance.navigation.type == 2) {

//刷新当前页面

window.location.reload()

}

})

//监听返回按钮事件

window.addEventListener("popstate", function(e) {

if (pushStateBool) {

//返回直接到公众号主页

WeixinJSBridge.call('closeWindow');

}

pushHistory();

},

false

);

function pushHistory() {

let state = {

title: "",

url: "#"

};

window.history.pushState(state, "我的钱包", "#");

}

});

实现原理：

window.performance.navigation.type包含三个值：

0 : TYPE_NAVIGATE (用户通过常规导航方式访问页面，比如点一个链接，或者一般的get方式)

1 : TYPE_RELOAD (用户通过刷新，包括JS调用刷新接口等方式访问页面)

2 : TYPE_BACK_FORWARD (用户通过后退按钮访问本页面)

关于IOS微信返回立即执行popstate事件原因：

因为在IOS微信浏览器里，返回上一个页面时，必定会触法popstate事件，就会导致立即返回到公众号。

通过pageshow事件先延迟1秒的事件，让执行popstate事件时无法返回，等定时器把pushStateBool的值改成true，然后再点击返回按钮，就会再次执行popstate事件，就可以执行你想要的操作了。

参考博客：