使用history.pushState修改URL哈希后，hashchange与popstate事件未触发的问题求助

我来帮你理清楚这个问题——这其实是浏览器事件机制的正常设计，不是bug哦！

为什么你的代码里事件没触发？ #

• popstate事件：它只会在用户点击浏览器的前进/后退按钮，或者调用history.back()/history.forward()/history.go()时触发。history.pushState()只是主动往历史记录栈里添加一条新条目，不属于浏览器的导航行为，所以不会触发这个事件。
• hashchange事件：只有当哈希值的变化是由location.hash = xxx、用户手动修改地址栏并回车、或浏览器导航（后退/前进）导致时，才会自动触发。而pushState是直接修改历史记录的URL，不属于这些触发场景，自然不会自动触发hashchange。

几种可行的解决方案 #

方案1：直接使用location.hash修改（最简单）

如果你的需求只是修改哈希并触发事件，完全可以跳过pushState，直接修改location.hash——这会自动触发hashchange事件，同时也会添加一条历史记录（和pushState效果一致）：

const btn = document.querySelector(".btn");

btn.addEventListener("click", function () {
  // 直接修改location.hash，自动触发hashchange
  location.hash = model.state.hash;
});

window.addEventListener("hashchange", function () {
  console.log("hash was changed:", window.location.hash);
});

方案2：调用pushState后手动触发事件

如果必须使用pushState（比如需要自定义历史记录的state参数），可以在调用pushState后手动派发事件：

const btn = document.querySelector(".btn");

btn.addEventListener("click", function () {
  const newHash = `#${model.state.hash}`;
  // 传入自定义state参数，方便后续在popstate中获取
  history.pushState({ hash: model.state.hash }, "", newHash);
  
  // 手动触发hashchange事件
  window.dispatchEvent(new HashChangeEvent('hashchange', {
    oldURL: window.location.href.replace(window.location.hash, ''),
    newURL: window.location.origin + window.location.pathname + newHash
  }));
  
  // 也可以手动触发popstate事件
  window.dispatchEvent(new PopStateEvent('popstate', {
    state: history.state
  }));
});

window.addEventListener("popstate", function (e) {
  console.log("popstate triggered, state:", e.state);
});

window.addEventListener("hashchange", function (e) {
  console.log("hash changed from", e.oldURL, "to", e.newURL);
});

方案3：封装工具函数（更优雅）

如果需要多次使用pushState+触发事件的逻辑，可以封装成工具函数避免重复代码：

function pushHashState(newHash) {
  const hashStr = `#${newHash}`;
  // 传入自定义state
  history.pushState({ hash: newHash }, "", hashStr);
  // 触发hashchange
  window.dispatchEvent(new HashChangeEvent('hashchange', {
    oldURL: window.location.href.replace(window.location.hash, ''),
    newURL: window.location.origin + window.location.pathname + hashStr
  }));
}

// 使用示例
const btn = document.querySelector(".btn");
btn.addEventListener("click", function () {
  pushHashState(model.state.hash);
});

window.addEventListener("hashchange", function () {
  console.log("hash updated:", window.location.hash);
});

额外提示 #

当用户手动修改地址栏的哈希并按下回车时，hashchange事件会正常触发，不需要额外处理。另外，如果你在pushState时传入了自定义的state对象，在popstate事件中可以通过event.state获取到这个对象，非常适合保存页面状态。

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