一、为什么要监听返回事件
个人中心改版后，用户进入个人中心，从个人中心进入我的资料，在我的资料里面可以修改昵称，头像，邮寄地址等信息。在修改完信息之后，会跳转到我的资料页面，代码中是直接指定了我的资料页面地址。于是，在修改完信息后的我的资料页面点返回按钮，会返回到修改信息的页面，而不会返回到个人中心。如下图历史记录。
二、监听返回事件方法
1、监听返回按钮的方法：
window.addEventListener("popstate", function(e) {
alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能
}, false);
2、如果这样写，还是会返回到上一页，所以还需要使用pushstate增加一个本页的url。
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#");
}
3、完整的写法：
pushHistory();
window.addEventListener("popstate", function(e) {
window.location.href="./wx_grzx.html";
}, false);
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#");
}
在实践中，这个方法是会有bug的。如果修改昵称页面不点击保存按钮，直接返回的话会返回到我的资料后立即跳转到个人中心。
于是呢，就出现了使用定时器来解决的方法。
pushHistory();
var bool=false;
setTimeout(function(){
bool=true;
},1500);//1.5秒后将bool设置为true
window.addEventListener("popstate", function(e) {
if(bool) {
window.location.href="./wx_grzx.html";
} else {
bool = true;//如果在1.5秒内触发了一次，则直接将bool设置为true
}
pushHistory();
}, false);
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#");
}
三、拓展知识
1、popstate用法：
popstate, 是HTML5新标准, 产生的目的就是做客户端前进后退。
每当处于激活状态的历史记录条目发生变化时，popstate事件就会被触发。如果当激活状态的历史记录条目是由history.pushState()方法创建的或者由history.replaceState()方法修改过的，则popstate事件的state属性包含了这条历史记录条目的state对象的一个拷贝。
需要注意的是调用pushState或者replaceState并不会触发popstate事件，只有点击浏览其回退按钮才回触发。
2、pushState和replaceState的异同。
相同：用法相同
以pushState来做说明：
格式：pushState(state, title, url)
参数说明：
state：是一个javaScript对象或者json字符串，它关系到由pushState()方法创建出来的新的history实体。用来存储插入到历史记录条目的相关信息。
title：一个暂时被某些浏览器忽略的参数，不过它在将来可能会被用上。现在的话可以传一个空字符串，也可以传一个简短的标题。
url：用来传递新的history实体的url。即显示在地址栏的url。
不同：pushState用于向history添加当前页面的记录，而replaceState是修改当前页面在history中的记录。
3、参考文档
http://blog.csdn.net/tianyitianyi1/article/details/7426606
四、现有程序中如何使用
现在程序中使用的是，修改信息后，不指定跳转路径，而是使用window.history.go(-1);，这样在修改了信息之后返回到我的资料，我的资料再返就是到个人中心了。
