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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了点击浏览器的返回按钮,就会刷新历史页面这个问题的解决方案，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2858字，纯文字阅读大概需要5分钟。

内容图文

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

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

相关阅读：

CSS的编码怎么转换

css3点击显示涟漪特效

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

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

内容总结

以上是互联网集市为您收集整理的点击浏览器的返回按钮,就会刷新历史页面这个问题的解决方案全部内容，希望文章能够帮你解决点击浏览器的返回按钮,就会刷新历史页面这个问题的解决方案所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端