Chrome 122版本window.popstate事件多次点后退/前进不触发问题

问题原因 #

Chrome 122版本对浏览器历史导航逻辑做了优化：当用户快速连续点击后退/前进按钮时，浏览器会合并多次历史操作，直接跳转到最终目标页面，跳过中间的popstate事件触发。这直接导致你之前依赖popstate事件触发时调用pushState维持历史栈、阻止导航的逻辑失效。

原代码失效的核心原因 #

你的原代码通过在popstate事件回调里再次调用pushState补充历史栈，以此抵消后退/前进操作。但Chrome 122的优化使得连续点击场景下popstate事件根本不会触发，补栈逻辑无法执行，浏览器直接完成导航。

解决方案 #

可以通过以下方式调整代码，适配Chrome 122的新行为：

方案1：用replaceState维持历史状态 #

// 页面加载时初始化历史状态，避免初始后退操作生效
window.history.replaceState({ preventNav: true }, null, window.location.href);

window.addEventListener('popstate', function(e) {
  // 校验状态，确认需要阻止导航
  if (e.state?.preventNav) {
    // 替换回当前页面的历史状态，覆盖后退/前进操作
    window.history.replaceState({ preventNav: true }, null, window.location.href);
  }
});

这种方式用replaceState替代pushState，避免历史栈无限增长，同时在popstate触发时强制重置历史状态，阻止页面导航。

方案2：结合beforeunload事件（注意用户体验） #

如果需要更严格的拦截（包括用户直接关闭标签页），可以添加beforeunload事件，但会触发浏览器默认的离开确认提示：

window.addEventListener('beforeunload', function(e) {
  e.preventDefault();
  e.returnValue = '';
});

注意：这种方式会打断用户的自然操作流程，仅建议在特殊业务场景下使用。

注意事项 #

强行阻止浏览器的后退/前进行为不符合常规网页交互逻辑，容易让用户产生困惑，建议仅在必要场景下使用。后续Chrome版本可能继续调整历史导航行为，需持续关注API变化。

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