小编典典

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

javascript

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

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

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

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

更新:

使用Firefox 4或Chrome8),显示onpopstatepushState被调用时不会触发(或者我做错了吗?可以随时进行改进!)。

更新2:

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


阅读 551

收藏
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