移动端H5页面返回并刷新页面(BFcache)的方法


Posted in Javascript onNovember 06, 2018

项目中的需求:

点击浏览器中的返回按钮,要让页面重新加载资源。因为这部分的资源每次去加载的内容都不一样,如果返回的时候,还是看到原先的内容,那做这个内容块的意义就很小了;而如果用户看完了这部分内容,再返回来的时候,这个地方换成了新的内容,这样就能体现这部分的价值了。

而对于浏览器来说,大部分浏览器的返回是直接使用缓存的,不会执行任何的javascript代码。原因:部分浏览器在后退时不会触发onload事件,?是HTML5世代浏览器新增的特性之一——Back-Forward Cache(简称bfcache)

什么是bfcache?

bfcache,即back-forward cache,可称为“往返缓存”,可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度。这个缓存不仅保存页面数据,还保存了DOM和JS的状态,实际上是将整个页面都保存在内存里。如果页面位于bfcache中,那么再次打开该页面就不会触发onload事件

pageshow事件

这个事件在用户浏览网页时触发,pageshow 事件类似于 onload 事件,onload 事件在页面第一次加载时触发, pageshow 事件在每次加载页面时触发,即 onload 事件在页面从浏览器缓存中读取时不触发。

pagehide事件

该事件会在用户离开网页时触发。离开网页有多种方式。如点击一个链接,刷新页面,提交表单,关闭浏览器等。pagehide 事件有时可以替代 unload事件,但 unload 事件触发后无法缓存页面。

persisted属性

pageshow事件和pagehide事件的event对象还包含一个名为persisted的布尔值属性。

对于pageshow事件,如果页面是从bfcache中加载的,则这个属性的值为true;否则,这个属性的值为false。

对于pagehide事件,如果页面在卸载之后被保存在bfcache中,则这个属性的值为true;否则,这个属性的值为false。

不同的浏览器在对当前窗口‘打开'历史记录中的前一个页面的表现上并不统一,这和浏览器的实现以及页面本身的设置有关系。

解决方案:

javascript监听pageshow事件阻止页面进入bfcache

window.addEventListener('pageshow', function (e) {
if (e.persisted) {
window.location.reload()
}
})

在uc和微信中测试通过,但是在某些安卓手机自带的浏览器中无效。

javascript监听pagehide事件阻止页面进入bfcache

window.addEventListener('pagehide', function (e) {
 var dom = document.body;
 dom.children.remove();
 setTimeout(function () {
  dom.appendChild("<script type='text/javascript'>window.location.reload();<\/script>");
 });
});

设置meta标签,清除页面缓存

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached,响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下

  • Public指示响应可被任何缓存区缓存
  • Private指示对于单个用户的整个或部分响应消息,不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息,此响应消息对于其他用户的请求无效
  • no-cache指示请求或响应消息不能缓存
  • no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
  • max-age指示客户机可以接收生存期不大于指定时间(以秒为单位)的响应
  • min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应
  • max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值,那么客户机可以接收超出超时期指定值之内的响应消息。

注:有些情况下设置清除缓存也没有起到作用,我自己做的这个h5页面就没有起到效果。具体情况还是要具体分析。

我遇到的情况:

<div class="content">
<iframe id="iframe" src="https://cpu.baidu.com/xx/xx/xxx" frameborder="no" scrolling="no"></iframe>
</div>

这个iframe中的地址每次刷新页面都会有不同的内容推送给用户。进入iframe中的内容之后,按返回按钮返回来想进行页面自动刷新,为的就是让用户看到新的内容。

做法:

使用pageshow进行整个页面刷新

window.addEventListener('pageshow', function (e) {
if (e.persisted) {
window.location.reload()
}
})

这样可以实现。

后面又觉得不妥,没有因为这个小部分而进行整个页面刷新,想到了另一种思路:因为这个iframe中的内容是动态的,可以对其进行定时器设置,如下:

let iframe = document.getElementById('iframe')
setInterval(() => {
iframe.setAttribute("src", "https://cpu.baidu.com/xx/xx/xx");
},15000)

这样也可以实现自己的功能。

最后可以结合一下:

let iframe = document.getElementById('iframe')
window.addEventListener('pageshow', function (e) {
 if (e.persisted) {
  iframe.setAttribute("src", "https://cpu.baidu.com/xx/xx/xx");
 }
})

这样做也有好处,可以避免使用定时器,对网页的性能也是比较好。但是这个方法在返回的时候,可以看到iframe里面内容的重新加载,会有一个时间间隙。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery 新浪网易的评论块制作
Jul 01 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
IE浏览器不支持getElementsByClassName的解决方法
Aug 27 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
Dec 01 Javascript
jquery遍历json对象集合详解
May 18 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
微信小程序 scroll-view组件实现列表页实例代码
Dec 14 Javascript
js操作浏览器的参数方法
Jan 21 Javascript
vue webuploader 文件上传组件开发
Sep 23 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 #Javascript
vue项目上传Github预览的实现示例
Nov 06 #Javascript
React Component存在的几种形式详解
Nov 06 #Javascript
支付宝小程序tabbar底部导航
Nov 06 #Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 #Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 #Javascript
微信小程序实现底部导航
Nov 05 #Javascript
You might like
php 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
PHP禁止页面缓存的代码
2011/10/23 PHP
php实现多张图片上传加水印技巧
2013/04/18 PHP
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
PHP levenshtein()函数用法讲解
2019/03/08 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
javascript搜索框效果实现方法
2015/05/14 Javascript
js无法获取到html标签的属性的解决方法
2016/07/26 Javascript
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
Python中的rfind()方法使用详解
2015/05/19 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
numpy添加新的维度:newaxis的方法
2018/08/02 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
pytorch 更改预训练模型网络结构的方法
2019/08/19 Python
python检测服务器端口代码实例
2019/08/31 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
Anya Hindmarch官网:奢侈设计师手袋及配饰
2018/11/15 全球购物
2015年计划生育责任书
2015/05/08 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书
服务器SVN搭建图文安装过程
2022/06/21 Servers