解决微信内置浏览器返回上一页强制刷新问题方法


Posted in Javascript onFebruary 05, 2017

微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验。而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的位置。

BINGO~

通过HTML5history 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返还回来。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JQUERY获取form表单值的代码
Jul 17 Javascript
最常用的12种设计模式小结
Aug 09 Javascript
将文本输入框内容加入表中的js代码
Aug 18 Javascript
JS的数组迭代方法
Feb 05 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 Javascript
微信小程序 数据遍历的实现
Apr 05 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
Oct 19 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 Javascript
js仿小米手机上下滑动效果
Feb 05 #Javascript
简单实现js无缝滚动效果
Feb 05 #Javascript
完美的js图片轮换效果
Feb 05 #Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 #Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 #Javascript
Vue.js学习示例分享
Feb 05 #Javascript
JavaScript定时器制作弹窗小广告
Feb 05 #Javascript
You might like
自动分页的不完整解决方案
2007/01/12 PHP
php字符串分割函数explode的实例代码
2013/02/07 PHP
PHP字符串的连接的简单实例
2013/12/30 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
python 合并文件的具体实例
2013/08/08 Python
零基础写python爬虫之抓取糗事百科代码分享
2014/11/06 Python
python处理按钮消息的实例详解
2017/07/11 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
简单了解django orm中介模型
2019/07/30 Python
使用Tkinter制作信息提示框
2020/02/18 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
草莓巧克力:Shari’s Berries
2017/02/07 全球购物
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
可以在一个PHP文件里面include另外一个PHP文件两次吗
2015/05/22 面试题
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
大学生职业生涯规划书范文
2014/01/14 职场文书
三万活动总结
2014/04/28 职场文书
2015公司年度工作总结
2015/05/14 职场文书
2016年学校党支部公开承诺书
2016/03/25 职场文书
2022年四月新番
2022/03/15 日漫