How to get notified about changes of the history via history.pushState?

Question

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 show…

Accepted Answer

5.5.9.1 Event definitions

The popstate event is fired in certain cases when navigating to a session history entry.

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`

How to get notified about changes of the history via history.pushState?

Solution

Problem

Related problems