js history对象 手机物理返回键
有兴趣的可以了解下history对象，不感兴趣也可以直接跳到手机物理返回键监听部分
使用场景：
场景1：项目中一个表单页面，需得填写验证码，填写验证码后提交，由于使用的form直接提交，没有使用AJAX，所以，在出现验证码填写错误的时候，就会跳转到错误提示页，3秒倒计时后使用history.back(-1)的方式返回上一页，这也就出现了一个问题，使用history.back(-1)进行后退之后，图形验证码已过期，但是却没有刷新，这样就导致用户重复多次填写验证码，影响用户体验；
场景2：关注公众号，第一次访问必须先绑定，绑定后才能进入系统；如果已经绑定直接可以进入系统，不会出现绑定页面；而且一个手机号只能绑定一个用户；如果用户刚绑定成功，进入系统页面后，直接按返回，这时，明明手机已绑定，但用同一手机号还是会出现绑定页面，这时虽然可以在点绑定时候去增加判断手机号是否已经绑定，但体验效果不如如果手机已经绑定，绑定页面就不会出现的效果；
******************HTML4【history对象】有length属性，go()/back()/forward()跳转方法****************************
我们要了解浏览器的history对象， history对象保存着用户上网的历史记录，从窗口被打开的那一刻算起；history.length属性保存着历史记录的URL数量。初始时，该值为1。如果当前窗口先后访问了三个网址，history.length属性等于3；history对象提供了一系列方法，允许在浏览历史之间移动，包括go()、back()和forward()。
【go()】方法可以在用户的历史记录中任意跳转。这个方法接收一个参数，表示向后或向前跳转的页面数的一个整数值。
go(负整数)：表示向后跳转(类似于后退按钮)
go(正整数)：表示向前跳转(类似于前进按钮)
示例：
go()方法无参数时，相当于history.go(0)，可以刷新当前页面
示例：
【back()】
back()方法用于模仿浏览器的后退按钮，相当于history.go(-1)
【forward()】
forward()方法用于模仿浏览器的前进按钮，相当于history.go(1)
示例：
如果移动的位置超出了访问历史的边界，以上三个方法并不报错，而是静默失败
【注意】使用历史记录时，页面通常从浏览器缓存之中加载，而不是重新要求服务器发送新的网页
********************监听手机物理返回键************************************
示例：
A页面跳到B页面，监听B页面返回键，并做相应操作，那么就可以在B页面javascript脚本写如下监听事件
pushHistory();
function pushHistory(){ //刚一进到B页面就往history历史记录pushstate一个url
var state = {
title:"title", //可以传空值""
url:"#"};
window.history.pushState(state,"title","#");
}
window.addEventListener("popstate",function(e){ //只要B页面按下手机物理返回键，就会被监听到
//该干嘛干嘛
WeixinJSBridge.invoke('closeWindow',{},function(res){}); //js代码关闭微信端当前网页
//window.location = "http://www.baidu.com"; //跳转到百度页面
},false);
或者
$(function(){
window.history.pushState("","","#");
})
window.addEventListener("popstate",function(e){
//该干嘛干嘛
})
另外一种方法（没有测试）：微信端返回按钮返回到上一页，上一页页面不刷新问题
window.onpageshow = function(event){
if(event.persisted){
window.location.reload();
}
}
以上代码就搞定监听手机物理返回键并作处理，下面有兴趣的可以了解
大家都知道在浏览器页面中，可以在不知道实际URL的情况下实现后退和前进，但是由于安全方面的考虑，开发人员无法得到用户浏览器的URL也没办法修改history里已有的url链接；
HTML5为history对象添加了两个新方法，history.pushState()和history.replaceState()，用来在浏览历史中添加和修改记录（两个方法使用方法都一样，不同的是pushState会改变history对象length属性，而replaceState不会）。
pushState（相当于进栈）可以往history里增加url链接，popState（相当于出栈）事件监测从history栈里弹出url。既然有提供popstate事件监测，那么我们就可以对popState进行监听。
【注意】
popState事件当同一个文档的history发生变化时，就会触发popState事件；
需要注意的是，仅仅pushState和replaceState不会触发该事件，只有用户点击浏览器的前进、后退按钮才会触发，或者使用javascript调用go()/back()/forward()才会触发，因为这些操作都可以改变history栈中的当前指针；另外该事件仅针对同一个文档有效，如果浏览器历史的切换，导致加载不同的文档，也不会触发该事件。
//无刷新页面切换：使用到如下API
【history.state】:当前url对应的状态信息
如果当前url不是通过pushState或者replaceState产生的，那么history.state就为null；
【history.pushState(state, title, url)】：将当前的url和history.state加入到history中,并用新的state和URL替换当前。不会造成页面刷新；
state：与要跳转的URL对应的状态信息
title：传空字符就可以
url：要跳转到的地址，不能跨域（跨域会报错）
【history.replaceState】：用新的state和URL替换当前的，不会造成页面刷新；
state：与要跳转的URL对应的状态信息
title：传空字符就可以
url：要跳转到的地址，不能跨域（跨域会报错）
【window.onpopstate】
history.go和history.back（包括用户按浏览器历史前进后退按钮）触发，并且页面无刷的时候（由于使用pushState修改了history）会触发popstate事件，事件发生时浏览器会从history中取出URL和对应的state对象替换当
前的URL和history.state。通过event.state也可以获取history.state。
【往返缓存】
默认情况下，浏览器会在当前会话(session)缓存页面，当用户点击“前进”或“后退”按钮时，浏览器就会从缓存中加载页面；浏览器有一个特性叫“往返缓存”(back-forward cache或bfcache)，可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度。这个缓存中不仅保存着页面数据，还保存了DOM和javascript的状态；实际上是将整个页面都保存在了内存里。如果页面位于bfcache中，那么再次打开该页面时就不会触发load事件
addEventListener()方法，事件监听(removeEventListener()方法移除设定的监听事件)
语法：element.addEventListener(event,function,useCapture);
参数：
element:文档节点、document、window 或 XMLHttpRequest
event:事件类型，如"click" 或 "mousedown"
function:事件触发后调用的函数或者是实现了EventListener接口
useCapture:布尔值，用于描述事件是冒泡还是捕获，参数可选，默认false（冒泡）
注意：event不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"
示例：
element.addEventListener("click", function(){ alert("Hello World!"); });
等效
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
向window对象添加事件
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
事件冒泡还是捕获？
事件传递方式有两种：冒泡、捕获、
事件传递定义了元素触发的顺序，如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：
addEventListener(event, function, useCapture);
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。
示例：
document.getElementById("myDiv").addEventListener("click", myFunction, true);
【removeEventListener()方法】
element.removeEventListener("mousemove", myFunction);
【浏览器兼容处理】
var x = document.getElementById("myBtn"); if (x.addEventListener) { // 所有主流浏览器，除了 IE 8 及更早版本 x.addEventListener("click", myFunction); } else if (x.attachEvent) { // IE 8 及更早版本 x.attachEvent("onclick", myFunction); }
IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。
但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:
element.attachEvent(event, function); element.detachEvent(event, function);
*****************************
//手机端弹窗
$.pop.showAlert({
content: "提示的信息",
yes:function(){ //点确定之后执行的事件
window.location.href = "http://www.baidu.com"; //跳转到百度页面
}
});
查看大神的例子
