[摘要]首先我们知道这个问题是如何发生的,假如我们有如下页面列表信息页面,点击进入详情页面,在详情页面修改了数据通过历史返回,再返回到列表信息页面,因为列表信息是历史返回的,还是默认显示原来修改前的数据,要...
首先我们知道这个问题是如何发生的,假如我们有如下页面列表信息页面,点击进入详情页面,在详情页面修改了数据通过历史返回,再返回到列表信息页面,因为列表信息是历史返回的,还是默认显示原来修改前的数据,要刷新一下才是修改后的数据,那么我们有什么办法可以点击手机返回按钮就可以刷新之前历史页面中的数据呢?
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
关键词:点击浏览器的返回按钮,就会刷新历史页面这个问题的处理方案