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

一尘不染

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

javascript

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

可悲的是，这意味着这些呼叫无法再由来检测onhashchange。

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

进一步的说明： 我正在开发一个Firefox插件，需要检测这些更改并采取相应措施。
我知道几天前有一个类似的问题，它询问听某些DOM事件是否有效，但我宁愿不依赖于此，因为可以出于许多不同的原因来生成这些事件。

更新：

使用Firefox 4或Chrome8），显示onpopstate在pushState被调用时不会触发（或者我做错了吗？可以随时进行改进！）。

更新2：

另一个（侧面）问题是window.location使用时未更新pushState（但是我认为我已经在此处阅读过此信息）。

阅读 461

2020-05-01

共1个答案

一尘不染

5.5.9.1事件定义

该 popstate 导航到会话历史记录条目时，事件在某些情况下被解雇。

据此，当您使用时，没有理由触发popstatepushState。但是这样的事件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);





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

您可以window.history.replaceState用相同的方式修补猴子。

注意：当然，您可以onpushstate简单地将其添加到全局对象，甚至可以通过以下方式使它处理更多事件：add/removeListener

2020-05-01