如何通过 history.pushState 获得有关历史记录更改的通知？

小编典典

如何通过 history.pushState 获得有关历史记录更改的通知？

all

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

可悲的是，这意味着这些呼叫无法再被onhashchange.

我的问题是：
是否有可靠的方法（黑客？；））来检测网站何时使用history.pushState？该规范没有说明引发的事件（至少我找不到任何东西）。
我尝试创建一个外观并替换window.history为我自己的 JavaScript 对象，但它根本没有任何效果。

进一步解释： 我正在开发一个 Firefox 插件，它需要检测这些变化并采取相应的行动。
我知道几天前有一个类似的问题询问侦听某些DOM 事件是否有效，但我宁愿不依赖它，因为这些事件可能因许多不同的原因而生成。

更新：

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

更新 2：

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

阅读 70

2022-07-12

共1个答案

小编典典

5.5.9.1 事件定义

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

据此，当您使用pushState.
但是这样的事件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

2022-07-12