点击浏览器或者手机返回按钮，刷新历史页面解决方案

前言

我前面文章中写了返回上一页并刷新页面的方式。这个是我们点击某个按钮，来进行操作的。但是假如我们不是点击某个按钮，而是直接点击手机下面的返回按钮或者浏览器自带返回按钮，如何刷新之前的历史页面呢？

应用场景

假如我们有如下页面列表信息页面

enter image description here

点击进入详情页面，在详情页面修改了数据。

enter image description here

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

解决方案

一、通过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();
    }
}

参考

关于onpageshow 事件，感兴趣的可以参考MDN中的文档：developer.mozilla.org/en-US/Firef…

javascript内存泄露及谷歌浏览器查看内存使用

yarn的使用及升级Node.js的新方法