如何通过 history.pushState 获得历史变化的通知？

Question

因此，既然 HTML5 引入了 history.pushState 来更改浏览器历史记录，网站开始将其与 Ajax 结合使用，而不是更改 URL 的片段标识符。

遗憾的是，这意味着 onhashchange 无法再检测到这些调用。

我的问题是： 是否有可靠的方法（hack？;)）来检测网站何时使用 history.pushState ？该规范没有说明有关引发的事件的任何内容（至少我找不到任何内容）。

我尝试创建一个外观并用我自己的 JavaScript 对象替换 window.history ，但它根本没有任何效果。

进一步的解释： 我正在开发一个 Firefox 附加组件，它需要检测这些变化并采取相应的行动。

我知道几天前有一个类似的问题，询问监听一些 DOM 事件 是否有效，但我宁愿不依赖它，因为这些事件可能由于很多不同的原因而产生。

更新：

这是一个 jsfiddle （使用 Firefox 4 或 Chrome 8）显示 onpopstate --- 在调用 pushState 时未触发（或者我做错了什么？随时改进它！） .

更新 2：

另一个（侧面）问题是 window.location 在使用 pushState 时没有更新（但我认为我已经在这里阅读过这个）。

原文由 Felix Kling 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

5.5.9.1 事件定义

在导航到会话历史记录条目时，在某些情况下会触发 popstate 事件。

据此，当您使用 pushState 时，没有理由触发 popstate。但是诸如 pushstate 类的事件会派上用场。因为 history 是一个宿主对象，你应该小心使用它，但 Firefox 在这种情况下似乎很好。这段代码工作得很好：

 (function(history){
    var pushState = history.pushState;
    history.pushState = function(state) {
        if (typeof history.onpushstate == "function") {
            history.onpushstate({state: state});
        }
        // ... whatever else you want to do
        // maybe call onhashchange e.handler
        return pushState.apply(history, arguments);
    };
})(window.history);

你的 jsfiddle _变成_：

 window.onpopstate = history.onpushstate = function(e) { ... }

你可以用同样的方式打补丁 window.history.replaceState 。

注意：当然你可以添加 onpushstate 简单地添加到全局对象，你甚至可以通过 add/removeListener 让它处理更多事件

原文由 gblazex 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我用简单的代理来做到这一点。这是原型的替代品

window.history.pushState = new Proxy(window.history.pushState, {
  apply: (target, thisArg, argArray) => {
    // trigger here what you need
    return target.apply(thisArg, argArray);
  },
});

原文由 Kalanj Djordje Djordje 发布，翻译遵循 CC BY-SA 4.0 许可协议