求助：Popstate事件在Firefox中无法触发，Chrome可正常运行

我之前也踩过这个坑！Chrome和Firefox对popstate事件的触发逻辑确实存在差异，先给你拆解原因，再讲具体的解决办法。

问题根源 #

Chrome和Firefox在处理popstate事件的触发条件上有明显区别：

• Chrome：哪怕页面没有主动通过pushState/replaceState修改过历史记录栈，当用户点击回退按钮（比如从当前页面回退到上一个打开的页面），Chrome会先触发当前页面的popstate事件，再执行导航操作。
• Firefox：只有当历史记录栈中存在通过pushState/replaceState主动添加的条目时，点击回退/前进按钮才会触发popstate事件。如果页面从未修改过历史栈，Firefox会直接执行页面导航，完全不会触发当前页面的popstate事件。

这就是你的代码在Chrome正常、Firefox没反应的核心原因——你没有主动修改过历史记录栈。

解决办法 #

核心思路是给页面初始化时主动添加一条历史记录，让Firefox认为历史栈有过修改，这样点击回退时就会触发popstate事件了。

步骤1：页面加载时添加初始历史状态 #

在页面加载完成后，调用history.pushState添加一条初始状态（参数可以自定义，不影响功能）：

$(document).ready(function() {
  // 先判断浏览器是否支持history API
  if (window.history && window.history.pushState) {
    // 添加初始历史状态，state参数可根据业务需求自定义
    history.pushState({ page: 'initial' }, null, window.location.href);
  }
});

步骤2：绑定popstate事件（原代码可保留，建议补充状态判断） #

$(window).on('popstate', function(event) {
  console.log('poped');
  
  // 通过event.originalEvent.state获取pushState时传入的状态
  const currentState = event.originalEvent.state;
  if (currentState) {
    console.log('当前历史状态:', currentState);
    // 这里可根据状态处理你的业务逻辑
  } else {
    // 处理无状态的情况（比如回退到最原始页面状态）
    // 若需阻止默认导航行为，可使用event.preventDefault()，但需谨慎操作
  }
});

注意事项 #

• pushState本身不会触发popstate事件，只有用户手动点击回退/前进按钮，或调用history.back()/history.forward()/history.go()时才会触发。
• 如果你的业务中已有调用pushState的逻辑（比如单页应用的路由切换），那无需额外添加初始状态，只要确保历史栈中有自定义条目即可。

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