移动端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 相关文章推荐
JavaScript 组件之旅(三):用 Ant 构建组件
Oct 28 Javascript
JqGrid web打印实现代码
May 31 Javascript
javascript中Number对象的toString()方法分析
Dec 20 Javascript
JS中script标签defer和async属性的区别详解
Aug 12 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 Javascript
jquery实现数字输入框
Feb 22 Javascript
微信小程序实现简单跑马灯效果
May 26 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
Mar 02 Javascript
小程序分页实践之编写可复用分页组件
Jul 18 Javascript
Javascript基于OOP实实现探测器功能代码实例
Aug 26 Javascript
详解Vue3使用axios的配置教程
Apr 29 Vue.js
学习使用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中session使用示例
2014/03/29 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
javascript操作css属性
2013/12/30 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
vue组件的写法汇总
2018/04/12 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
python实现根据月份和日期得到星座的方法
2015/03/27 Python
python实现文本文件合并
2015/12/29 Python
详解Python3注释知识点
2019/02/19 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
python help函数实例用法
2020/12/06 Python
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
高中生学期学习自我评价
2014/02/24 职场文书
公司办公室岗位职责
2014/03/19 职场文书
2015年安置帮教工作总结
2015/05/22 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers
Nginx 匹配方式
2022/05/15 Servers