网页后退不刷新的N种解决方案

转自网页后退不刷新的N种解决方案

正常在需要做页面后退操作时，可以通过调用history对象的go方法和back方法来控制页面后退，

window.history.go(-1);
window.history.back();
复制代码

但是在部分移动端浏览器及webview中，页面实现了后退但是并没有刷新，而是使用了缓存。

这里总结了几种强制回退页面后刷新上一页的方法。

方案一：主动跳转至来源页

A页面打开B页面时，在B页面中document.referrer为A页面，通过主动跳转至document.referrer可以实现刷新上一页，但是副作用为会额外生成历史记录，导致再次点击后退时又回到当前页面。

window.location.href = document.referrer
复制代码

兼容性：

方案二：监听页面pageshow事件

A页面打开B页面时，在A页面监听pageshow事件，当由B页面退回至A页面时会触发pageshow事件。

window.addEventListener('pageshow', function(e) {
   if (e.persisted) {
      window.location.reload();
   }
});
复制代码

兼容性：

方案三：使用History对象修改当前历史记录

A页面打开B页面时，先替换当前历史记录点，然后再打开B页面。

var  json={time:newDate().getTime()};
window.history.replaceState(json,"",window.location.href+"&t="+newDate().getTime());
window.location.href= url;
复制代码

兼容性：

方案四：

如果是在自家公司的APP中，可以通过与APP约定一个字段拼接在URL中，当APP检测到该字段时强制在APP层面触发刷新页面。