移动端页面返回强制刷新页面

Posted hyzhou2018

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端页面返回强制刷新页面相关的知识,希望对你有一定的参考价值。

返回不刷新是因为,移动端浏览器为了节省流量一般返回都会去缓存,可以通过页面显示事件监听页面返回,通过event.persisted字段来判断当前页面是否是从缓存中获去的

window.addEventListener('pageshow', function (event) {
//event.persisted属性为true时,表示当前文档是从往返缓存中获取
  if (event.persisted) location.reload();
 });

实际测试发现,返回时页面显示事件虽然执行,但是location.reload()并没有效果,页面仍然没有刷新,尝试通过元控制当前页面不缓存,仍然失败。

<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" />

华为尝试发现计时器刷Nova4e不兼容,其他浏览器外部其他ok
最终代码

function reload(){
    setTimeout(function() {
        location.reload()
    }, 500);
}

window.addEventListener('pageshow', function (event) {
    //event.persisted属性为true时,表示当前文档是从往返缓存中获取
    if (event.persisted) {
        reload();
    }
});

注:以上方案来自团队小伙伴贡献,记录下来,方便以后查阅

以上是关于移动端页面返回强制刷新页面的主要内容,如果未能解决你的问题,请参考以下文章

移动端 点击返回按钮页面不刷新

H5移动端,ios从后台返回到app,页面会白一下

当页面返回不刷新时进行强制刷新

《解决微信内置浏览器返回上一页强制刷新问题方法》

网页中页面的刷新(F5)与强制刷新(Ctrl+F5)有啥区别?

js怎么刷新当前页面?