移动端中pagehide、pageshow的应用

　　闲话少叙，来进入场景：订单提交页面，各种积分礼品卡规则都算好了，用户提交表单开始支付，支付完成进入成功提示页面，这是绝大部分网站的付款体验吧，那么问题来了，web移动端中进入成功提示页后，用户点击浏览器自带的回退按钮会发生什么那？

　　

　　结果会回到刚刚的订单提交页面（不然那），这就不合理了，这个订单已经被提交了，已经成历史了，怎么能回到提交页面那？只能在历史记录里查询，这里要求的结果就是提交成功后，用户点击浏览器回退按钮不会进入到上一个用户订单提交页面，要求不动或者跳到其他提示页面；在pc端，浏览多个页面，点击浏览器回退前进按钮，页面都会刷新，但是在移动浏览器上，浏览多个页面，其他非浏览状态页面会被浏览器缓存起来，包括DOM和JS，前进和回退的时候，不会产生新的交互，也就是页面不会刷新，想在页面监听load的同学可歇歇了，这个问题着实困扰了我一阵子，网上也有类似的插件，监听浏览器行为的，但是有兼容问题，也想过利用history对象的更改来控制页面，效果也不理想，最终的解决方式是通过监听页面pagehide和pageshow事件来做其他的操作，使得用户要回退到已失效的订单提交页面会发生跳转到其他提示页面，code看起来很简单：

监控所有页面的触发事件：

$("document").on("pagehide",function(event){...})

监听制定页面：

$("document").on("pagehide","page",function(event,data){...})

这里的page可选。指的是指定 pagehide 事件触发时指向的页面id。 内部页面, 请使用 #id。外部页面，使用exp.html形式

　　本例中就可以这么写：

$(document).on("pageshow",function(){
  //some code in here...
});

　　捕获到本页面pageshow事件后，检查此表单是否被提交过，然后做相应的操作。这样就解决移动web中页面前进回退无法重新run js的问题了。

　　原文地址：移动端中pagehide、pageshow的应用，薛陈磊 | Share the world