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


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 相关文章推荐
也说JavaScript中String类的replace函数
Sep 22 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
jquery实现ajax加载超时提示的方法
Jul 23 Javascript
BootStrap与Select2使用小结
Feb 17 Javascript
详解Angular4 路由设置相关
Aug 26 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
Nov 09 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
vue如何截取字符串
May 06 Javascript
JS实现放烟花效果
Mar 10 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 Javascript
vue3为什么要用proxy替代defineProperty
Oct 19 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
多重?l件?合查?(一)
2006/10/09 PHP
处理单名多值表单的详解
2013/06/08 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
Smarty中的注释和截断功能介绍
2015/04/09 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
php similar_text()函数的定义和用法
2016/05/12 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
详解Document.Cookie
2015/12/25 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
python中常用检测字符串相关函数汇总
2015/04/15 Python
python杀死一个线程的方法
2015/09/06 Python
Python使用django搭建web开发环境
2017/06/09 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
python配置grpc环境
2019/01/01 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
公司市场部岗位职责
2013/12/02 职场文书
档案接收函
2014/01/13 职场文书
《小熊住山洞》教学反思
2014/02/21 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL
SQLServer中exists和except用法介绍
2021/12/04 SQL Server