Javascript 如何检测何时使用history.pushState和history.replaceState？

当历史记录状态被修改时，是否有我可以订阅的事件？如何触发？

当历史记录发生更改时，应触发onpopstate事件，您可以在代码中这样绑定它：

window.onpopstate = function (event) {
  // do stuff here
}

该事件也可能在页面加载时触发，您可以确定该事件是从页面加载触发的，或者通过使用pushState/replaceState来确定。通过检查事件对象的状态属性，如果该事件是由页面加载引起的，则该事件将是未定义的

window.onpopstate = function (event) {
  if (event.state) {
    // history changed because of pushState/replaceState
  } else {
    // history changed because of a page load
  }
}

不幸的是，目前没有onpushstate事件，要解决这个问题，您需要包装pushState和replaceState方法来实现您自己的onpushstate事件

---

我有一个库，它使使用pushState变得更容易，可能值得一试。它提供了一个简单的api，用于使用基于pushState的路由。

我使用它还可以在调用

pushState

和

replaceState

时收到通知：

// Add this:
var _wr = function(type) {
    var orig = history[type];
    return function() {
        var rv = orig.apply(this, arguments);
        var e = new Event(type);
        e.arguments = arguments;
        window.dispatchEvent(e);
        return rv;
    };
};
history.pushState = _wr('pushState'), history.replaceState = _wr('replaceState');

// Use it like this:
window.addEventListener('replaceState', function(e) {
    console.warn('THEY DID IT AGAIN!');
});

不过，这通常是矫枉过正。而且它可能不适用于所有浏览器。（我只关心我的浏览器版本。）

---

NB.它在Google Chrome扩展内容脚本中也不起作用，因为它不允许更改站点的JS环境。您可以通过插入带有上述代码的

来解决这个问题，但这更过分。

似乎event.state仍然可以在页面加载（Chrome）上设置。Mozilla/Firefox不会在页面加载上发出onpopstate事件，但Safari/Chrome doi在我的情况下，这个事件发生在ajax调用成功之后。可能由于这个原因，我第一次无法检测到事件。如果我单击“后退/前进”按钮，则效果良好，但我不希望我的用户单击这些历史记录按钮。明确声明

pushState

不会触发

onpopstate

！