14

My Google-fu pulls up nothing.

When you do this:

var stateObj = { state: "some state" };
history.pushState(stateObj, "page 2", "other.htm");

Is there an associated window callback?

I know that there's this: 

window.onpopstate = function() {

}

Which works great for listening to when a user hits the back button. However, I want to listen to any time the URL changes at all, and I'm not sure how to do it.

Is there a global callback for anytime the URL changes?

Knu
  • 14,012
  • 5
  • 54
  • 86
thekevinscott
  • 4,661
  • 8
  • 38
  • 54
  • http://stackoverflow.com/questions/680785/on-window-location-hash-change – Joe May 02 '12 at 18:56
  • Try binding it to an element and then check is typeof value (typeof elem.onpopstate), if it's undefined it's not supported, if it's a function all good. http://perfectionkills.com/detecting-event-support-without-browser-sniffing/ for how to – GillesC May 02 '12 at 18:57
  • 2
    possible duplicate of [How to get notified about changes of the history via history.pushState?](http://stackoverflow.com/questions/4570093/how-to-get-notified-about-changes-of-the-history-via-history-pushstate) – thekevinscott May 02 '12 at 19:19
  • 1
    Possible duplicate of [How to get notified about changes of the history via history.pushState?](https://stackoverflow.com/questions/4570093/how-to-get-notified-about-changes-of-the-history-via-history-pushstate) – Lee Aug 08 '17 at 14:35
  • 1
    Possible duplicate of [On - window.location.hash - Change?](https://stackoverflow.com/questions/680785/on-window-location-hash-change) – Michael Coxon Aug 08 '17 at 16:45

1 Answers1

27

No, there's not a onpushstate or whatever. However, a little monkey patching can fix that:

var pushState = history.pushState;
history.pushState = function () {
    pushState.apply(history, arguments);
    fireEvents('pushState', arguments);  // Some event-handling function
};

This will only notify you when pushState is used. You'd probably want to do something similar for replaceState.

If you need to be notified whenever the URL changes at all, some combination of the above and a hashchange handler will get you most of the way there.

Peter C
  • 5,821
  • 23
  • 37
  • 4
    What do ya know, [this](http://stackoverflow.com/questions/4570093/how-to-get-notified-about-changes-of-the-history-via-history-pushstate) question is almost identical and so is the answer. :P – Peter C May 02 '12 at 19:00
  • Can this get you into any trouble? E.g. doing this on a third party website where you load a script. Or is this mostly safe? – Cristian Jan 24 '17 at 10:27
  • I found an example where this might not work. For example in Backbone.history, the `history.pushState` reference is copied to `Backbone.history.pushState`. If we replace the reference for `window.history.pushState` using `=` assignment then you will still have `Backbone.history.pushState` referencing the old `pushState` therefore your monkey patch code is not called. If only JS had built-in reference management :( – Cristian Jan 24 '17 at 10:35
  • What would it look like to use this? – SeanMC Jan 17 '19 at 04:51
  • @Cristian You should set `Backbone.history.pushState` with the above decorated method if you want to do that – Nick Bull Feb 08 '21 at 15:11