移动端H5页面返回并刷新页面（BFcache）的方法_h5点击按钮刷新页面,h5刷新页面方法 - CSDN文库

16 浏览量更新于2023-05-04 评论收藏 72KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

移动端移动端H5页面返回并刷新页面（页面返回并刷新页面（BFcache）的方法）的方法

项目中的需求：项目中的需求：

点击浏览器中的返回按钮，要让页面重新加载资源。因为这部分的资源每次去加载的内容都不一样，如果返回的时候，还是看

到原先的内容，那做这个内容块的意义就很小了；而如果用户看完了这部分内容，再返回来的时候，这个地方换成了新的内

容，这样就能体现这部分的价值了。

而对于浏览器来说，大部分浏览器的返回是直接使用缓存的，不会执行任何的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。各个消

息中的指令含义如下

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38616809

粉丝: 6
资源: 981

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈