基于浏览器返回按钮的popstate事件工作原理及使用疑问

核心困惑场景 #

• 场景1：Example.com（点击链接）→ Google.com（点击返回）→ 直接跳转至Yahoo.com
• 场景2：Example.com（点击链接）→ Google.com（点击返回）→ 短暂显示Example.com后跳转至Yahoo.com

我的代码（已翻译注释） #

// 监听popstate事件
window.addEventListener('popstate', function(event) {
  // 重定向到目标站点
  window.location.href = 'https://www.yahoo.com';
});

// 点击链接时，为URL添加当前页面地址作为prev参数
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
  links[i].addEventListener('click', function(event) {
    var currentUrl = encodeURIComponent(window.location.href);
    var href = this.getAttribute('href');
    this.setAttribute('href', href + '?prev=' + currentUrl);
  });
}

机制解析与场景差异原因 #

popstate事件的核心规则 #

popstate事件仅在浏览器前进/后退按钮触发，或调用history.back()/history.forward()/history.go()时触发，且仅当历史栈条目发生变化时执行。注意：调用history.pushState()/history.replaceState()不会触发该事件。

两种场景的差异根源 #

1. 场景1（直接跳转）：
   点击返回按钮时，浏览器从缓存中直接恢复Example.com的历史条目，同时立即触发popstate事件，重定向逻辑抢先于页面渲染执行，因此看不到Example.com。

2. 场景2（短暂显示原页面）：
   点击返回按钮时，Example.com的页面缓存失效或未被缓存，浏览器需要先重新请求并渲染Example.com的内容，之后才触发popstate事件，因此会短暂显示原页面再跳转。

代码逻辑的无关性 #

你给链接添加prev参数的逻辑，仅修改了跳转URL，并未操作浏览器历史栈（未调用history API），因此不会影响popstate事件的触发时机或逻辑。

优化建议 #

若想避免场景2中短暂显示原页面的问题，可改用history.replaceState()修改历史栈条目，或在Example.com页面加载时，通过history.state判断是否为返回操作触发的加载，提前执行重定向逻辑。

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