之前在项目中遇到一个问题，就是在微信网页上面本来是有返回按钮的，但是大多数人都为了方便，会使用安卓手机自带的物理返回键，这个返回键按下后，就会按照你浏览器的栈存储的路径来一层一层返回，就不执行你页面上的那个返回按钮的操作了，但是这个物理返回键的监听好像没有直接的办法进行，所以有人就想到了曲线的办法
原理：
- 页面加载完成时，调用history.pushState写入一个指定状态STATE，并监听window.onpopstate；
- 当onpopstate被触发时，检查event.state是否等于STATE，如果相等，表示页面发生了后退（按下返回键或者浏览器的后退按钮），则把这次行为当作是返回键被按下了（把点击浏览器的后退按钮也误算进来了，不过没啥好法子了呀）。
为了方便调用，有人把这个逻辑稍微封装了下，代码见这里（https://github.com/iazrael/xback）
使用方法：
将此插件引进去后，使用方法：
XBack.listen(function(){
alert('ah, press press press');
});
具体使用的时候，也有一些问题：
因为这个是实现利用histroy.pushState写入了一个指定状态STATE，你点击一次后，这个写入的状态就没有了，如果你没有后退页面(还在当前页面),上次那个监听的操作执行完后，你还需要监听这个物理返回键，这时候你就需要再上次那个操作完之后再使用histroy.pushState再写入一次之前写入的那个状态，这样下次会继续监听那个物理返回键，否则下次你再点击那个返回键的话，就会直接返回浏览器的栈的上一级
不过这个方法有些缺陷：
- 如果项目本身使用了pushState，则历史记录会有瑕疵（多了一个历史）；
- 浏览器的后退按钮点击以及调用history.back()也会被当成按下了返回键。
举个例子：
我在vue的项目中引入xback.js
<remote-script src="/js/xback.js" @load="load_xback"></remote-script>
关于上面在vue中引入外部js，请参考 http://www.cnblogs.com/zhuchenglin/p/7455203.html
然后在vue中定义一个load_xback 方法
load_xback(){
var self = this
XBack.listen(function(){
//这个是vux的确认弹出框
self.$vux.confirm.show({
title:'确认返回吗?',
content:'确认后，将返回',
onConfirm () {
//确认返回操作
},
onCancel(){
history.pushState('x-back', null, location.href);
// XBack.record;
}
})
});
},
xback源码：
;!function(pkg, undefined){
var STATE = 'x-back';
var element;
var onPopState = function(event){
event.state === STATE && fire();
}
var record = function(state){
history.pushState(state, null, location.href);
}
var fire = function(){
var event = document.createEvent('Events');
event.initEvent(STATE, false, false);
element.dispatchEvent(event);
}
var listen = function(listener){
element.addEventListener(STATE, listener, false);
}
;!function(){
element = document.createElement('span');
window.addEventListener('popstate', onPopState);
this.listen = listen;
this.record = record(STATE);
record(STATE);
}.call(window[pkg] = window[pkg] || {});
}('XBack');
这个方法目前只对支持h5浏览器有效
本文参考：http://blog.csdn.net/kongjiea/article/details/22850629
如需转载此文，请在下面注明出处：http://www.cnblogs.com/zhuchenglin/p/7607768.html