• 前端分享学习博客,探究前端相关技术,推动天朝前端发展,有任何问题都可以留言一起探究
  • 由于站内自链接问题,部分pre中的代码首字母使用大写以过滤筛选
  • 欢迎友链互换,还有,如果有大神请不要黑我的站点(o´・ェ・`o)
  • 如果你觉得博客还不错,请Ctrl+D收藏( *︾▽︾)

移动端中pagehide、pageshow的应用

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

移动端中pagehide、pageshow的应用

结果会回到刚刚的订单提交页面(不然那移动端中pagehide、pageshow的应用),这就不合理了,这个订单已经被提交了,已经成历史了,怎么能回到提交页面那?只能在历史记录里查询,这里要求的结果就是提交成功后,用户点击浏览器回退按钮不会进入到上一个用户订单提交页面,要求不动或者跳到其他提示页面;在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的问题了。

ps:这里要引用版本较高的jQuery,博主使用的是jQuery2.0;


薛陈磊的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明移动端中pagehide、pageshow的应用
喜欢 (3)
[905044086@qq.com]
分享 (0)
作者薛陈磊
关于作者:
非著名前端工程师,关注Html5、Css3、Javascript、Node.js和各种前端框架发展,学习管理技巧和团队建设方法,期待遇到更多前端小伙伴一起学习进步;
说点什么...
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址