在移动端项目中遇到了点击浏览器返回键,页面不刷新的问题,通过研究学习,采用了以下的解决方案。问题解决了。
(一)移动端点击返回键,页面不刷新解决方案
移动端浏览器点击返回上一级,页面不刷新的原因之一:返回上一级的页面是从往返缓存bfcache)
中获取的,而浏览器保存了DOM和js的状态,再次打开时不触发onload事件,即页面不会重新加载。
可在js代码中增加以下页面强制刷新的代码:
1、判断页面是否存在“往返缓存”;
2、如果存在,重新加载当前页面。
// 点击浏览器返回按钮,404页面刷新
window.addEventListener('pageshow', function (event) {
//event.persisted属性为true时,表示当前文档是从往返缓存中获取
if (event.persisted) location.reload();
});
pageshow和onload很相似:
“pageshow”:每次浏览网页时触发,事件必须绑在window上;
“onload”:第一次浏览时触发(用于页面从浏览器缓存中获取时,不触发);
(二)“往返缓存”
"往返缓存"
(back-forward cache,简称bfcache),当用户点击前往新页面时,会把当前页面(包括页面数据、DOM、JS状态等)保存在bfcache
中;当用户点击后退按钮时,会从bfcache
中获取上一级的页面,加快页面的转换速度和减少网络请求时间。
bfcache的出现导致了页面不刷新的问题,如下:
在A页面点击“去完成”时跳转到B页面,完成任务之后在B页面点击回退按钮,退回到A页面。这个时候A页面的“去完成”按钮理应会变成“已完成”,但是因为A页面跳转B页面的时候,A页面的数据(DOM和js状态)存在了bfcache中,所以从B跳转到A页面时,A页面并不会刷新,按钮不会变成“已完成”。
往返缓存_图解.jpg
笔记整理记录
网友评论