HTML5 History API（pushState/popState）在Safari与Firefox中的行为差异及解决方案咨询

这是个典型的浏览器历史API行为差异问题，我帮你理清楚原因和解决办法：

Safari 16.0对历史栈的处理逻辑和Firefox存在差异：当你从外部页面（比如google.com）导航到你的测试页index.html后，立即调用replaceState修改当前历史条目时，Safari会把这个修改操作视为初始页面加载的一部分，不会将修改后的index.html?page=1作为独立的历史项保留在栈中。

此时你再调用pushState添加index.html?page=2，最终的历史栈就变成了：google.com → index.html?page=2。所以点击后退按钮时，直接回到了上一个导航页面google.com。

而Firefox则会正确保留replaceState修改后的条目，历史栈结构是：google.com → index.html?page=1 → index.html?page=2，因此后退会先跳转到page=1，符合你的预期。

你可以通过两种方式让Safari正确识别replaceState后的历史条目：

方法1：等待页面完全加载后执行历史操作 #

把你的历史API代码包裹在DOMContentLoaded事件监听器中，确保页面DOM已经加载完成，这样Safari会正确处理replaceState的修改：

<!DOCTYPE html>
<html>
<body>
<script>
document.addEventListener('DOMContentLoaded', () => {
  window.history.replaceState({a: 1}, '', window.location.pathname + "?page=1");
  window.history.pushState({a:2 }, '', window.location.pathname + "?page=2");
  
  window.onpopstate = (event) => {
    // 额外检查state是否存在，避免报错
    if (event.state) {
      console.log(event.state.a);
    }
  };
});
</script>
</body>
</html>

方法2：先添加初始历史条目再替换（适合更严格的栈控制） #

如果你需要更明确地控制历史栈，可以先把初始的index.html添加到历史栈，再替换成page=1，这样Safari会明确将其作为独立条目：

<!DOCTYPE html>
<html>
<body>
<script>
// 先把初始页面推入历史栈
window.history.pushState({a: 0}, '', window.location.pathname);
// 替换当前条目为page=1
window.history.replaceState({a: 1}, '', window.location.pathname + "?page=1");
// 添加page=2条目
window.history.pushState({a:2 }, '', window.location.pathname + "?page=2");

window.onpopstate = (event) => {
  if (event.state) {
    console.log(event.state.a);
  }
};
</script>
</body>
</html>

这种方式的历史栈会多一个初始的index.html条目，后退时会依次经过page=1、index.html，最后回到google.com。如果不需要这个中间条目，方法1就足够解决问题。

内容的提问来源于stack exchange，提问作者Marco Meyer-Conde