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(); } }
相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
相关阅读:
以上就是点击浏览器的返回按钮,就会刷新历史页面这个问题的解决方案的详细内容,更多请关注php中文网其它相关文章!
![php中文网最新课程二维码](/static/images/article_wechat2021.jpg?1111)
声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
- 上一篇:a标签嵌套怎么解决
- 下一篇:a:active加动画点击无效的解决方案
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论