微信android返回上一页位置,解决微信内置浏览器返回上一页强制刷新问题方法...
微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验。而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的位置。
BINGO~
通过HTML5的history API + 缓存可以做到这一点。
执行原理:
1.0、通过history API的 history.pushState或 history.replaceState 保存AJAX状态;
2.0、同时将AJAX获取到的数据缓存起来(可以考虑使用H5的localStorage或sessionstorage);
3.0、当返回到这个页面时,先获取窗口的history.state,如果不为空,表示保存的有状态,我们要做的就是恢复到这个状态;
4.0、读取缓存数据并加载。如果涉及到分页,且是滚动加载的形式,需要将当前页设置为history.state中的页数。
使用技术点介绍:
history API:
HTML5 history API只包括2个方法:history.pushState()和history.replaceState(),以及1个事件:window.onpopstate。
①history.pushState()
它的完全体是 history.pushState(stateObject, title, url),包括三个参数。
第1个参数是状态对象,它可以理解为一个拿来存储自定义数据的元素。它和同时作为参数的url会关联在一起。
第2个参数是标题,是一个字符串,目前各类浏览器都会忽略它(以后才有可能启用,用作页面标题),所以设置成什么都没关系。目前建议设置为空字符串。
第3个参数是URL地址,一般会是简单的?page=2这样的参数风格的相对路径,它会自动以当前URL为基准。需要注意的是,本参数URL需要和当前页面URL同源,否则会抛出错误。
调用pushState()方法将新生成一条历史记录,方便用浏览器的“后退”和“前进”来导航(“后退”可是相当常用的按钮)。另外,从URL的同源策略可以看出,HTML5 history API的出发点是很明确的,就是让无跳转的单站点也可以将它的各个状态保存为浏览器的多条历史记录。当通过历史记录重新加载站点时,站点可以直接加载到对应的状态。
②history.replaceState()
它和history.pushState()方法基本相同,区别只有一点,history.replaceState()不会新生成历史记录,而是将当前历史记录替换掉。
③window.onpopstate
push的对立就是pop,可以猜到这个事件是在浏览器取出历史记录并加载时触发的。但实际上,它的条件是比较苛刻的,几乎只有点击浏览器的“前进”、“后退”这些导航按钮,或者是由JavaScript调用的history.back()等导航方法,且切换前后的两条历史记录都属于同一个网页文档,才会触发本事件。
上面的“同一个网页文档”请理解为JavaScript环境的document是同一个,而不是指基础URL(去掉各类参数的)相同。也就是说,只要有重新加载发生(无论是跳转到一个新站点还是继续在本站点),JavaScript全局环境发生了变化,popstate事件都不会触发。
popstate事件是设计出来和前面的2个方法搭配使用的。一般只有在通过前面2个方法设置了同一站点的多条历史记录,并在其之间导航(前进或后退)时,才会触发这个事件。同时,前面2个方法所设置的状态对象(第1个参数),也会在这个时候通过事件的event.state返还回来。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
微信android返回上一页位置,解决微信内置浏览器返回上一页强制刷新问题方法...相关推荐
- 《解决微信内置浏览器返回上一页强制刷新问题方法》
<解决微信内置浏览器返回上一页强制刷新问题方法> 参考文章: (1)<解决微信内置浏览器返回上一页强制刷新问题方法> (2)https://www.cnblogs.com/li ...
- html5 微信返回按钮,《解决微信内置浏览器返回上一页强制刷新问题方法》(示例代码)...
微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验.而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的 ...
- weixin公众号页面返回上一层_《解决微信内置浏览器返回上一页强制刷新问题方法》...
微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验.而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的 ...
- 微信html开发返回刷新页面,解决微信内置浏览器返回上一页强制刷新问题方法...
微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验.而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的 ...
- 如何实现点击微信内置浏览器返回按钮,返回指定页面,或者原地刷新
$(function(){function pushHistory() {var state = {title: "title",url: "#"};windo ...
- Cocos2d-js Android手机上微信内置浏览器黑屏解决方法
1.在Cocos2d-js开发过程中 通常会遇到很多问题.本次解决在安卓手机上的微信内置浏览器黑屏问题. 2.微信的内置浏览器和其它专业的浏览器不同.微信内置浏览器用x5内核.在一些方面比其它专业的浏 ...
- 微信内置浏览器点击“返回”关闭窗口
场景:开发微信内的H5活动,需要进行微信授权,我们采用的是在一个静态页面(只有js,所以是个空白页面)内进行授权,授权后再跳转到活动主页. 客户需求:从活动主页返回时不显示这个授权页面(空白页面),直 ...
- 微信公众号本地环境搭建(解决微信接口需要公网地址,但是只有本地环境的问题)
微信公众号本地环境搭建(解决微信接口需要公网地址,但是只有本地环境的问题) 置顶2018年01月08日 17:22:13 阅读数:342 目前移动开发处于比较火的的趋势,很多的开发者都跃跃欲试,目前移 ...
- vue支付宝html,vue 解决在微信内置浏览器中调用支付宝支付的情况
我的思路大概是这样的 1. 验证是否是在微信内置浏览器中调用支付宝 2.给支付页面的url加上调用接口所需的参数(因为在微信里是不能直接调用支付宝的需要调用外部浏览器) 3.在外部浏览器中完成支付跳转 ...
最新文章
- python用for循环一直出现最后一个值_python中for循环的list最后一个数据总会覆盖前面的数据...
- C++ C# 中作用域限定符
- Linux异步管道多线程速率测试
- python3 urllib模块
- struts返回对象json格式数据
- Codeforces 264B - Good Sequences
- 下载站mime属性设置(让文件可下载)
- Maven Dependency设置,详解!
- FFmpeg再学习 -- Linux 安装说明
- 对称加密密码 对称加密算法
- C语言中short和unsigned short的取值问题和计算机组成原理
- linux的dlan脚本,Linux DLNA
- ARM服务器和云手游
- 垃圾回收只知道标记清除?一文帮你打通V8垃圾回收
- Maven_怎么查看maven本地仓库地址
- temp--文件夹中的文件处理
- 基于Vue+Node的商城后台管理系统
- 从传统金融变身科技公司后,2017年的平安交了这样一份答卷
- BFF——服务于前端的后端
- arcgis 分子式标注