Chrome中popstate事件异常：代码触发pushState后回退不触发事件

我开发类单页Web应用时，用popstate事件处理浏览器回退按钮，代码如下：

window.addEventListener('popstate', function () { 
       
   backOneStep(0); // 执行自定义逻辑（返回应用上一界面）
   history.pushState(null, null, '');

});

这段代码在Firefox和Safari里运行正常，但Chrome更新后出现异常：如果上一次的history.pushState是由代码触发的，popstate事件就不会触发。具体表现为：首次点击回退按钮能正常执行backOneStep回到应用上一界面，再次点击回退则直接退出应用；但如果第二次点击回退前先点击页面任意位置，popstate事件又能正常触发。

问题原因 #

这是Chrome近期版本更新后的行为变化：当通过脚本调用pushState后，浏览器会进入“脚本主导历史栈”的状态，此时直接点击回退按钮，Chrome不会触发popstate事件，直到用户进行手动页面交互（比如点击页面元素），才会恢复正常的事件触发逻辑。

解决方案 #

方案一：改用replaceState替代pushState（推荐）

把pushState换成replaceState，这样不会在浏览器历史栈中新增无意义的条目，同时避免Chrome的状态判定问题，各浏览器行为也能保持一致：

window.addEventListener('popstate', function () { 
   backOneStep(0); // 执行自定义逻辑（返回应用上一界面）
   history.replaceState(null, null, ''); // 替换当前历史条目，而非新增
});

方案二：手动维护应用历史状态

不依赖浏览器的popstate事件同步状态，而是在应用内每次页面切换时，自行维护一份历史栈记录。当用户点击回退时，直接读取本地维护的状态执行逻辑，再同步更新浏览器历史，完全掌控状态流转。

方案三：添加全局交互监听（临时hack）

添加一个全局点击监听，通过用户的任意页面交互重置Chrome的状态，不过这种方法属于临时 workaround，不推荐作为长期解决方案：

document.addEventListener('click', function() {
  // 仅触发浏览器交互状态重置，无实际逻辑
});

总结 #

优先选择方案一，改用replaceState能从根源上解决Chrome的行为差异，同时让代码逻辑更合理——毕竟我们不需要在处理回退后再新增一条历史记录。测试后该方案在三大主流浏览器中都能稳定运行。

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