前言
我前面文章中写了返回上一页并刷新页面 的方式。这个是我们点击某个按钮，来进行操作的。但是假如我们不是点击某个按钮，而是直接点击手机下面的返回按钮或者浏览器自带返回按钮，如何刷新之前的历史页面呢？
应用场景
假如我们有如下页面列表信息页面
点击进入详情页面，在详情页面修改了数据。
通过历史返回，再返回到列表信息页面，因为列表信息是历史返回的，还是默认显示原来修改前的数据，要刷新一下才是修改后的数据。那么我们通过什么方式可以点击手机返回按钮或者浏览器返回，就能刷新之前历史页面中的数据呢？
相关知识
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();
}
}七、 单页tab，返回并刷新页面
针对单页tab，点击切换，或者点击进入详情等，需要，每次点击单页的时候 window.history.pushState一下页面数据，再次返回的时候就会刷新页面。备注，pushState的第一个参数state不能为空。例如如下：
window.history.pushState({
url: `${pathname}?${params}`,
prev: window.location.href,
time: (new Date()).getTime()
}, null, `${pathname}?${params}`)就可以了。
一般这样就可以解决了。
其实假如每次历史都会改变，也可以监听如下
window.addEventListener("popstate", function(e) {
// console.log(e.state, history.state)
// reload方法
}, false);也是可以解决的，但是这个的前提是每次历史数据都更改，否则仅进入最后一次。
参考
关于onpageshow 事件，感兴趣的可以参考MDN中的文档：https://developer.mozilla.org/en-US/Firefox/Releases/1.5/Using_Firefox_1.5_caching
History API： https://developer.mozilla.org/zh-CN/docs/Web/API/History_API/Working_with_the_History_API
onpopstate： https://developer.mozilla.org/zh-CN/docs/Web/API/Window/popstate_event