移动端中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
移动端中pagehide、pageshow的应用的更多相关文章
- 移动端中遇到的坑(bug)!!!
1.模拟单选点击的时候,在ios手机下,点击下面的内容选择,会出现页面闪一闪!! 解决方案:样式重置html的时候加上这句 -webkit-tap-highlight-color: rgba(0, ...
- 浅谈移动端中的视口(viewport)
在 PC 端,视口指的是浏览器的可视区域,其宽度和浏览器窗口的宽度保持一致.在 CSS 标准文档中,视口也被称为初始包含块,它是所有 CSS 百分比宽度推算的根源,给 CSS 布局限制了一个最大宽度. ...
- 谈反应式编程在服务端中的应用,数据库操作优化,提速 Upsert
反应式编程在客户端编程当中的应用相当广泛,而当前在服务端中的应用相对被提及较少.本篇将介绍如何在服务端编程中应用响应时编程来改进数据库操作的性能. 开篇就是结论 接续上一篇<谈反应式编程在服务端 ...
- js判断当前页面在移动设备还是在PC端中打开
方法一: var isPC = function () { var userAgentInfo = navigator.userAgent.toLowerCase(); var Agents = ne ...
- H5移动端中必备技能
Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面<meta name="viewport" content="width=device-wid ...
- 游戏服务端中使用Servlet和Java注解的一个好设计
SNS类游戏基本都是使用HTTP短连接,用Java来开发服务端时能够使用Servlet+Tomcat非常轻松的架构起服务端来.在这里介绍一种使用Servlet比較好的一种设计,我也见过非常多基于HTT ...
- echarts移动端中例子总结。
接下来我总结一下我常用到的几个移动端echarts小例子: 第一步:我先引入自己想要的库 第二步: 给echarts给了一个窗口(有大小的窗口) 第三步: 开始引入你想要的图形的options 我做的 ...
- 关于调试php的socket服务端中遇到的问题及解决办法
今天终于把socket的服务端解决了,期间遇到了很多问题呢~ 1.用cmd运行php的问题: 2.socket_create()函数未定义问题: 3.查看端口的问题. 以下逐一说说解决办法: 1.在c ...
- 腾讯X5WebView集成及在移动端中使用
工作中经常涉及H5网页的加载工作,最多使用的就是安卓系统控件WebView,但是当网页内容比较多的时候,需要等待很久才能加载完,加载完后用户才能看到网页中的内容,这样用户需要等很久,体验很差. 那能不 ...
随机推荐
- EmberJs之数组绑定@each&[]
写在前面 好长时间没有写博客了,昨天花了些时间又整理了下之前发布过的<Ember.js之computed Property>文章,并创建了一个测试代码库,花了些时间,希望能使用测试代码的方 ...
- 分布式系统之Quorum (NRW)算法
基于Quorum投票的冗余控制算法 Quorom 机制,是一种分布式系统中常用的,用来保证数据冗余和最终一致性的投票算法,其主要数学思想来源于鸽巢原理. 在有冗余数据的分布式存储系统当中,冗余数据对象 ...
- dojo/dom源码学习
dojo/dom模块作为一个基础模块,最常用的就是byId方法.除此之外还有isDescendant和setSelectable方法. dom.byId(myId)方法: 各种前端类库都免不了与D ...
- 基于正则的INI读写工具类,支持加密解密
看到这个标题,有人会问,现在都用xml做配置文件了,谁还用INI文件啊!下面来简单对比一下xml和ini: 1.XML功能强大表达能力强,同时扩展性好. 2.它的主要优势是异构平台的整合.通讯. 3. ...
- C#调试入门篇
DotNet程序的调试,是DotNet程序员必备的技能之一,开发出稳定的程序.解决程序的疑难杂症都需要很强大的调试能力.DotNet调试有很多方法和技巧.现在本文就介绍一下借助DebugView工具进 ...
- 案例研究:Web应用间歇性SqlException
最近有客户找到我,说他们生产环境的事件日志中有下面的报错.要我帮忙找找原因. Event Type: Warning Event Source: ASP.NET 2.0.50727.0 Event C ...
- ubuntu 安装 axel
Axel 通过打开多个 HTTP/FTP 连接来将一个文件进行分段下载,从而达到加速下载的目的.对于下载大文件,该工具将特别有用. 安装:sudo apt-get install axel 一般使用: ...
- STSdb,最强纯C#开源NoSQL和虚拟文件系统 4.0 RC2 支持C/S架构
STSdb是什么 再来说明一下STSdb是什么:STSdb是C#写的开源嵌入式数据库和虚拟文件系统,支持实时索引,性能是同类产品的几倍到几十倍,访问官方网站. 温故知新 之前发了文章<STSdb ...
- 厚积薄发,拥抱 .NET 2016
厚积薄发这个词是高三英语老师在高考前写在黑板上,高中三年努力这么久,是时候迎面而上,冲刺向前.所以,一想到.NET 2016,脑海里蹦出的第一个词就是它. .NET 2016 是 .NET 一次质的飞 ...
- Node.js与Sails~日志机制log
回到目录 看到Sails的日志就会想起来log4net,确实它们在很多地方是相似的,都是采用分级别记录的方式,而sails我觉得在使用上更加方便,它不需要我们做多于的事情,直接sails.log.级别 ...