从页面返回时如何自动刷新HTML页面？

问题背景 #

有两个页面，从page-2返回index页面时，页面不会重新加载，window.onload函数无法触发。当前index页面的核心代码如下：

window.onload = function() {
     document.querySelector('h2').innerText = Math.floor(Math.random() * 101);
 };

尝试过添加<meta http-equiv="Cache-control" content="no-cache">元标签，但没有效果。已知window.onpageshow可以解决问题，希望找到更自动的页面返回刷新方法。

相关示例代码：

JavaScript #

window.onload = function(event) {
  document.querySelector('h2').innerText = Math.floor(Math.random() * 101);
};

function navigate(link) {
  window.location.href = 'page-2.html';
}

HTML #

<h2></h2>
<button onclick="navigate('page-2.html');">Page 2</button>

可行方案 #

1. 优先使用pageshow事件（最可靠） #

pageshow是浏览器专门为处理前进/后退缓存（BF Cache）设计的事件，不管页面是首次加载还是从缓存返回，都会触发。直接替换原有的window.onload即可：

window.addEventListener('pageshow', function() {
  document.querySelector('h2').innerText = Math.floor(Math.random() * 101);
});

如果需要区分是否从缓存加载，可以利用event.persisted属性：

window.addEventListener('pageshow', function(event) {
  // 仅在从缓存返回时执行（可选）
  if (event.persisted) {
    document.querySelector('h2').innerText = Math.floor(Math.random() * 101);
  }
});

这个方案无需额外配置，兼容性覆盖所有现代浏览器，是最优解。

2. 后端配置禁用BF Cache #

前端meta标签对BF Cache的控制有限，部分浏览器（如Chrome）不认可。可以通过后端设置响应头彻底禁用缓存：

Cache-Control: no-store, no-cache, must-revalidate
Pragma: no-cache
Expires: 0

这样返回页面时浏览器会重新请求资源，自然触发window.onload。但需要后端配合调整。

3. 跳转时修改历史记录（前端hack） #

在跳转到page-2前，给当前页面的URL添加随机参数，强制返回时重新加载：

function navigate(link) {
  // 更新当前历史记录的URL，添加时间戳参数
  window.history.replaceState(null, null, `${window.location.pathname}?t=${Date.now()}`);
  window.location.href = link;
}

这个方法会改变URL，可能影响用户分享或书签，仅作为备选方案。

总结 #

最推荐的是pageshow事件方案，它专门适配浏览器前进/后退场景，实现简单且无副作用，完全满足自动刷新的需求。

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