点击浏览器的返回按钮,就会刷新历史页面这个问题的解决方案

首先我们知道这个问题是如何发生的，假如我们有如下页面列表信息页面，点击进入详情页面，在详情页面修改了数据通过历史返回，再返回到列表信息页面，因为列表信息是历史返回的，还是默认显示原来修改前的数据，要刷新一下才是修改后的数据，那么我们有什么办法可以点击手机返回按钮就可以刷新之前历史页面中的数据呢？

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() { });

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

通过iframe方式阻止缓存

页面中添加如下代码

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

这种方式有待验证。

通过时间戳强制刷新方式

下面代码是针对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();
    }
}

相信看了这些案例你已经掌握了方法，更多精彩请关注其它相关文章！

相关阅读：

CSS的编码怎么转换

css3点击显示涟漪特效

怎样用canvas做出粒子喷泉动画的效果

以上就是点击浏览器的返回按钮,就会刷新历史页面这个问题的解决方案的详细内容，更多请关注其它相关文章！