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

Question

当历史状态被修改时，是否有一些我可以订阅的事件？多么?

Answer 1

onpopstate事件应该在历史记录更改时触发，您可以在代码中绑定到它，如下所示：

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

也可以在页面加载时激发此事件，您可以确定事件是否是从页面加载中激发的，或者通过使用pushState/replaceState检查事件对象的state属性，如果事件是由页面加载引起的，则此事件将是未定义的

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

不幸的是，目前还没有own状态事件，为了避免这个问题，你需要同时包装pushState和replaceState方法来实现你自己的own状态事件。

我有一个名为Davis.js的库，它可以让使用pushState变得更容易，它可能值得一试，它提供了一个简单的api来处理基于pushState的路由。

Answer 2

我过去经常使用它来通知何时调用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. It在Google Chrome扩展内容脚本中也不起作用，因为它不允许改变网站的JS环境。您可以通过插入包含上述代码的<script>来解决此问题，但这更是大材小用。