This website requires JavaScript.

点击浏览器或者手机返回按钮,刷新页面缓存

2018.03.30 14:48字数 2559阅读 308喜欢 0评论 0

应用场景

假如我们在列表信息页面,点击进入详情页面,在详情页面修改了数据。

通过历史返回,再返回到列表信息页面,因为列表信息是历史返回的,还是默认显示原来修改前的数据,要刷新一下才是修改后的数据。那么我们通过什么方式可以点击手机返回按钮或者浏览器返回,就能刷新之前历史页面中的数据呢?

相关知识

onpageshow事件和onload事件。 onpageshow 事件类似于 onload 事件,onload 事件在页面第一次加载时触发, onpageshow 事件在每次加载页面时触发,即 onload 事件在页面从浏览器缓存中读取时不触发。

为了查看页面是直接从服务器上载入还是从缓存中读取,你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。 如果页面从浏览器的缓存中读取该属性返回 ture,否则返回 false

解决方案

一、通过onload方式

代码如下:

页面中写一个隐藏的input

<input type="hidden" id="refreshed" value="no">

js操作如下

onload=function(){
    var refreshedId=document.getElementById("refreshed");  
      if(refreshedId.value=="no"){
          refreshedId.value="yes";
      } else{
          refreshedId.value="no";
          location.reload();
      } 
    }

二、通过onpageshow 方式

这种方式在电脑上是没有问题的,但是苹果safari中返回不执行onload事件,要用如下方式:

window.onpageshow = function(event) {
    if (event.persisted) {
        window.location.reload()
    }
};

通过实际操作发现,event.persisted在电脑中一直是返回false,但是在手机safari中是没有问题的。

三、综合解决方案

因此,可以如下写代码:

if (/iphone|ipod|ipad.*os 5/gi.test(navigator.appVersion)) {
  window.onpageshow = function(event) {
    if (event.persisted) {
      window.location.reload();
    }
  };
} else {
  onload = function() {
    var refreshedId = document.getElementById("refreshed");
    if (refreshedId.value == "no") {
      refreshedId.value = "yes";
    } else {
      refreshedId.value = "no";
      location.reload();
    }
  };
}

通过上面代码发现在safari中第一次打开页面的时候,有时候会出现闪屏效果。

添加如下代码:

$(window).bind("unload", function() { });

就没有再出现闪屏效果了。

4、通过iframe方式阻止缓存

页面中添加如下代码

<iframe style="height:0px;width:0px;visibility:hidden" src="about:blank">this prevents back forward cache</iframe>

这种方式有待验证。

5、清除缓存方式

我之前博客中也写过 清除浏览器缓存的几种方式 ,但是这种方式,经过验证,不起作用。

6、通过时间戳强制刷新方式

下面代码是针对iPad中safari返回按钮问题

var showLoadingBoxSetIntervalVar;
var showLoadingBoxCount = 0;
var showLoadingBoxLoadedTimestamp = 0;
function showLoadingBox(text) {
  var showLoadingBoxSetIntervalVar = self.setInterval(function() {
    showLoadingBoxIpadRelaod();
  }, 1000);
  showLoadingBoxCount = 0;
  showLoadingBoxLoadedTimestamp = new Date().getTime(); //Here load the spinner
}
function showLoadingBoxIpadRelaod() {
  //计算时间超过500毫秒
  var diffTime =
    (new Date().getTime() - showLoadingBoxLoadedTimestamp - 500) / 1000;
  showLoadingBoxCount = showLoadingBoxCount + 1;
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  if (diffTime > showLoadingBoxCount && isiPad) {
    location.reload();
  }
}