1 问题描述:
在微信公众号开发过程中,无论是iOS或者安卓都出现后退不刷新的问题。
2 造成此问题的原因:
页面直接从浏览器缓存中读取。
以下就解决此问题的方法并结合iOS和安卓的兼容性谈谈自己的看法和建议。
3 网上解决此问题的方法:
网上解决此问题的方法建议使用onpageshow事件查看页面是直接从服务器上载入还是从缓存中读取,然后决定是否启动强制刷新。
根据MDN文档的说明,当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件。(这包括了后退/前进按钮操作,同时也会在onload 事件触发后初始化页面时触发)。persisted 属性可以查看页面的读取情况,如下
window.addEventListener('pageshow', function(event) {
console.log('pageshow:');
console.log(event.persisted);
});
// event.persisted为true,表示从缓存读取,false表示从服务器返回。
在iOS中,这个值会正常更新,但是在安卓中,persisted一直为false,所以此方法不能完全解决问题。
4 解决后退刷新的两种方法:
1) 使用cookie或者localStorage设置缓存字段
页面A跳转到页面B,页面B设置缓存,后退时读取页面B设置的缓存,并决定是否刷新(刷新之后需要清除缓存,否则将持续一直循环刷新),返回时根据缓存判断是否需要强制刷新。这种方法的局限性:跳转到页面B直接退出,之后再进去页面A时,页面A读取到缓存将导致页面重复加载一次,这样情况下会对页面一些一次弹窗产生影响。
2)在pageshow事件基础上再添加performance.navigation.type加判断(此判断方法为最优),可以查询到页面加载的多种情况。
var TYPE_NAVIGATE = 0, // 当前页面是通过点击链接,书签和表单提交,或者脚本操作,或者在url中直接输入地址,type值为0
TYPE_RELOAD = 1, // 点击刷新页面按钮或者通过Location.reload()方法显示的页面,type值为1
TYPE_BACK_FORWARD = 2, // 页面通过历史记录和前进后退访问时。type值为2
TYPE_RESERVED = 255; // 任何其他方式,type值为255
window.addEventListener('pageshow', () => {
if (e.persisted || (window.performance &&
window.performance.navigation.type == TYPE_BACK_FORWARD)) {
location.reload()
}
}, false)
踩坑一直未放弃,填坑一直在路上。具有移动端丰富开发经验的同学,请留下你的id,让我关注你。哈哈哈
部分参考自:https://www.jianshu.com/p/24c4162fd610 作者:halapro_liu