如何用preventBack()函数实现返回按钮刷新页面？及相关代码功能疑问

首先，咱们先拆解下你的需求：你原来的代码是通过history.forward()阻止页面后退，但现在希望用户跳转到外部网站后，再返回本站时能自动刷新页面——这个场景其实和单纯阻止后退是不同的，咱们需要针对浏览器的缓存机制来调整方案。

为什么原代码不适用当前需求 #

你的原代码是强制页面前进，相当于把浏览器后退的行为“抵消”了，但这只适用于在本站内的页面跳转。当用户跳转到外部网站后，浏览器的历史栈里已经加入了外部网站的记录，此时用户点击返回，会回到你的页面，但浏览器通常会从缓存加载这个页面，而不是重新请求服务器，这时候原代码的逻辑就起不到刷新的作用了。

正确的实现方案：利用pageshow事件 #

浏览器提供了pageshow事件，它会在页面显示时触发——包括从缓存中加载页面的情况。我们可以通过这个事件判断页面是否是从缓存恢复的，然后强制刷新：

// 监听页面显示事件
window.addEventListener('pageshow', function(event) {
  // event.persisted 为true时，表示页面是从浏览器缓存中加载的
  if (event.persisted) {
    // 强制从服务器刷新页面，而不是使用缓存
    window.location.reload(true);
  }
});

代码解释 #

• pageshow：这个事件在页面被显示时触发，不管页面是第一次加载还是从缓存中恢复，都会触发（区别于load事件，后者只有第一次加载时触发）。
• event.persisted：这是pageshow事件特有的属性，当页面是从缓存中加载时，该值为true。
• location.reload(true)：传入true参数会强制浏览器从服务器重新获取页面资源，而不是使用本地缓存，确保页面是最新的。

额外说明 #

如果你还需要保留“阻止本站内后退”的逻辑，可以把两个需求结合起来，但要注意场景区分：

// 阻止本站内的后退行为
function preventBack() {
  window.history.forward();
}
setTimeout(preventBack, 0);

// 处理从外部网站返回时的刷新
window.addEventListener('pageshow', function(event) {
  if (event.persisted) {
    window.location.reload(true);
  }
});

// 清空unload事件的无用逻辑
window.onunload = function() {};

这样一来，用户在本站内点击后退会被强制前进，而从外部网站返回时，页面会自动刷新。

内容的提问来源于stack exchange，提问作者Mukarram Haidari