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


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 相关文章推荐
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 Javascript
js获取select选中的option的text示例代码
Dec 19 Javascript
jQuery设置和获取HTML、文本和值示例
Jul 08 Javascript
5种处理js跨域问题方法汇总
Dec 04 Javascript
JS实现同时搜索百度和必应的方法
Jan 27 Javascript
javascript实现图片循环渐显播放的方法
Feb 24 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
jQuery插件扩展实例【添加回调函数】
Nov 26 Javascript
利用 spin.js 生成等待效果(js 等待效果)
Jun 25 Javascript
200行HTML+JavaScript实现年会抽奖程序
Jan 22 Javascript
countUp.js实现数字动态变化效果
Oct 17 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
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
PHP批量检测并去除文件BOM头代码实例
2014/05/08 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
JavaScript setInterval()与setTimeout()计时器
2019/12/27 Javascript
python3实现暴力穷举博客园密码
2016/06/19 Python
Flask之flask-session的具体使用
2018/07/26 Python
django Admin文档生成器使用详解
2019/07/22 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
Python3读写ini配置文件的示例
2020/11/06 Python
中专生自荐信
2013/10/12 职场文书
留学自荐信的技巧
2013/10/17 职场文书
护士自荐信怎么写
2013/10/18 职场文书
简单英文演讲稿
2014/01/01 职场文书
生物制药自我鉴定
2014/01/25 职场文书
效能监察建议书
2014/05/19 职场文书
反腐倡廉演讲稿
2014/05/22 职场文书
验房委托书
2014/08/30 职场文书
房产协议书范本2014
2014/09/30 职场文书
财务部会计岗位职责
2015/02/03 职场文书
家长意见和建议怎么写
2015/06/04 职场文书
实习单位鉴定意见
2015/06/04 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书
浅析MongoDB之安全认证
2021/06/26 MongoDB
关于 Python json中load和loads区别
2021/11/07 Python