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

问题描述

所以现在HTML5引入了来改变浏览器的历史记录，网站开始使用这个结合Ajax，而不是改变URL的片段标识符。

onhashchange 检测到。

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

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

我知道几天前有一个类似的问题，是否听一些 DOM事件会很有效率，但我宁愿不要这样做，因为这些事件可能是由于许多不同的原因而产生的。

更新：

这是一个jsfiddle（使用Firefox 4或Chrome 8），它显示当 pushState onpopstate 被调用（或者我正在做些什么？兴错了？ ）。

更新2： 另外一个（ ）在使用 pushState 时没有更新 window.location （但是我已经阅读了关于这个我认为）。

解决方案

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

 （function（history）{
 var pushState = history.pushState; $ b $ （history.onpushstate ==function）{
 history.onpushstate（{state：state}）; 
} 
 // ...任何你想做的事
 //可能调用onhashchange e.handler 
返回pushState.apply（历史，参数）; 
}; 
}） （的window.history）; 
  

您的jsfiddle ：

函数（e）{...}

您可以将窗口.history.replaceState 以相同的方式。

注意：当然你可以添加 onpushstate 简单地指向全局对象，甚至可以通过 add / removeListener

处理更多事件。

So now that HTML5 introduces history.pushState to change the browsers history, websites start using this in combination with Ajax instead of changing the fragment identifier of the URL.

Sadly that means that those calls cannot be detect anymore by onhashchange.

My question is: Is there a reliable way (hack? ;)) to detect when a website uses history.pushState? The specification does not state anything about events that are raised (at least I couldn't find anything).
I tried to create a facade and replaced window.history with my own JavaScript object, but it didn't have any effect at all.

Further explanation: I'm developing a Firefox add-on that needs to detect these changes and act accordingly.
I know there was a similar question a few days ago that asked whether listening to some DOM events would be efficient but I would rather not rely on that because these events can be generated for a lot of different reasons.

Update:

Here is a jsfiddle (use Firefox 4 or Chrome 8) that shows that onpopstate is not triggered when pushState is called (or am I doing something wrong? Feel free to improve it!).

Update 2:

Another (side) problem is that window.location is not updated when using pushState (but I read about this already here on SO I think).

解决方案

According to this, there is no reason for popstate to be fired when you use pushState. But an event such as pushstate would come in handy. Because history is a host object, you should be careful with it, but Firefox seems to be nice in this case. This code works just fine:

(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);

Your jsfiddle becomes:

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

You can monkey-patch window.history.replaceState in the same way.

Note: of course you can add onpushstate simply to the global object, and you can even make it handle more events via add/removeListener

这篇关于如何通过history.pushState获得关于历史变化的通知？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！