移动端页面后退读浏览器缓存的解决方案

原文地址：https://blog.youkuaiyun.com/bijunwei/article/details/89883148

//安卓手机 返回时会有缓存

//为清除缓存页面开始时直接reload

/* 一些浏览器中返回按钮是直接使用缓存的，不会执行任何js代码，例如, 在提交的时候将按钮设置为loading状态，如果在提交成功后没有对按钮进行处理，那么返回后按钮依然是loading状态，这就很尴尬了尴尬。

原因：部分浏览器在后退时不会触发onload事件，這是HTML5世代浏览器新增的特性之一——Back-Forward Cache(简称bfcache)

什么是bfcache

《JavaScript高级程序设计》有提及bfcache：

bfcache，即back-forward

cache，可称为“往返缓存”，可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度。这个缓存不仅保存页面数据，

还保存了DOM和JS的状态，实际上是将整个页面都保存在内存里。如果页面位于bfcache中，那么再次打开该页面就不会触发onload事件

pageshow事件

这个事件在页面显示时触发，无论页面是否来自bfcache。在重新加载的页面中，pageshow会在load事件触发后触发；

而对于bfcache中的页面，pageshow会在页面状态完全恢复的那一刻触发。

pagehide事件

该事件会在浏览器卸载页面的时候触发，而且是在unload事件之前触发。

persisted属性

pageshow事件和pagehide事件的event对象还包含一个名为persisted的布尔值属性。

对于pageshow事件，如果页面是从bfcache中加载的，则这个属性的值为true；否则，这个属性的值为false。

对于pagehide事件，如果页面在卸载之后被保存在bfcache中，则这个属性的值为true；否则，这个属性的值为false。

不同的浏览器在浏览器会在当前窗口“打开”历史纪录中的前一个页面的表现上并不统一，这和浏览器的实现以及页面本身的设置都有关系。 */

/解决方法–放在head里/

window.addEventListener(‘pageshow’, function(event) {

if (event.persisted || window.performance && window.performance.navigation.type == 2) {

location.reload();

}

}, false);