原生JS实现SPA时PushState引发浏览器前进后退异常问题

问题现象 #

• 页面跳转后，需点击两次浏览器后退才能返回上一页
• 后退后浏览器前进按钮直接变灰不可用
• 仅Chrome常规模式出现该问题，隐身模式下正常，同类SPA实现也存在相同情况

触发代码 #

导航按钮的核心逻辑：

buttonProfile.addEventListener("click", function () {
  window.history.pushState({}, "", "profile/");
  var updatePage = new Event("update-page");
  dispatchEvent(updatePage);
});

应用通过监听update-page事件更新页面内容，实现无刷新导航。

问题根源 #

大概率是Chrome常规模式下的第三方扩展干扰或者历史栈操作逻辑冗余导致：

• 部分浏览器扩展会篡改历史栈行为，隐身模式禁用扩展后恢复正常，验证了这一点
• 如果存在重复绑定事件、多次调用pushState的情况，会导致历史栈中添加了冗余条目，后退时需要多次点击才能跳过这些无效条目

修复方案 #

1. 优化历史栈操作逻辑 #

确保每次导航只添加一条历史记录，避免重复调用pushState：

// 处理浏览器前进后退的popstate事件，仅更新内容不修改历史栈
window.addEventListener('popstate', () => {
  dispatchEvent(new Event("update-page"));
});

// 导航按钮点击逻辑：先判断当前URL，避免重复添加历史条目
buttonProfile.addEventListener("click", () => {
  if (window.location.pathname !== '/profile/') {
    window.history.pushState({}, "", "profile/");
    dispatchEvent(new Event("update-page"));
  }
});

2. 排查并禁用干扰扩展 #

在Chrome中依次禁用所有第三方扩展，逐个测试找到干扰源，之后将该扩展加入排除列表或更新至最新版本。

3. 初始化基准历史状态 #

页面加载时手动初始化历史栈基准，避免初始状态异常：

window.addEventListener('load', () => {
  window.history.replaceState({}, document.title, window.location.href);
});

4. 按需使用replaceState替代pushState #

如果不需要保留当前页面的历史记录（比如页面内状态切换），可以用replaceState替代pushState，减少历史栈冗余：

window.history.replaceState({}, "", "profile/");

验证步骤 #

1. 禁用Chrome所有扩展后测试导航行为，确认是否恢复正常
2. 检查代码中是否存在重复绑定导航事件、多次触发pushState的逻辑

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