How to observe a change in the URL using JavaScript?

Question

The documentation for the popstate Window event states:

Note that just calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event will be triggered by doing a browser action such as a click on the back or forward button (or calling history.back() or history.forward() in JavaScript).

I need a way to execute some code when the URL changes by means that don't trigger the popstate event (such as history.replaceState()). ~~Preferably, using the MutationObserver API~~^[1], and most definitely without polling the URL every x seconds.

Also, hashchange won't do, as I must act on every change in the URL, not just the hash part.

Is that possible?

^[1] It is explained on another question why the MutationObserver API doesn't work for this.

(other) Related questions:

just call your other code when you call replaceState(), or create a custom event and dispatch it. if code you don't control calls it, wrap the function to achieve the last sentence. — dandavis
– dandavis, Commented Jun 25, 2019 at 19:26
But I'm not the one calling replaceState() and similar functions. The web application code is. (I'm writing an userscript). — Marc.2377
– Marc.2377, Commented Jun 25, 2019 at 19:27
can't you run the userscript before the other code loads? most extensions provide that as a setting. — dandavis
– dandavis, Commented Jun 25, 2019 at 19:28
You could continuously poll in an interval but you don't want that state running/consuming in the background the entire time? (just thinking) — Ilan P
– Ilan P, Commented Jun 25, 2019 at 19:29
@dandavis Yes, I'm currently doing that, but the script is only loaded once (when the page is first loaded). If the application changes its own URL, my script must detected it, and that's what I'm after. — Marc.2377
– Marc.2377, Commented Jun 25, 2019 at 19:30

Marc.2377 · Accepted Answer · 2019-06-27 04:10:13Z

9

+50

You need to redefine (wrap) the history.replaceState that the other script is using:

(function(){
  var rs = history.replaceState; 
  history.replaceState = function(){
    rs.apply(history, arguments); // preserve normal functionality
    console.log("navigating", arguments); // do something extra here; raise an event
  };
}());

No polling, no waste, no re-writing, no hassle.

Do the same for pushState, or whatever other natives (like ajax) you wish/need when writing userscripts.

edited Jun 27, 2019 at 4:10

Marc.2377

8,9557 gold badges60 silver badges104 bronze badges

answered Jun 25, 2019 at 19:33

dandavis

16.8k5 gold badges43 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Heretic Monkey Over a year ago

The OP would need to do the same with pushState, and something similar with location, location.href, etc.

dandavis Over a year ago

@HereticMonkey: no, changing location.href would reload the page and destroy the script variable anyway (though the user script would still fire on the page load then, as usual). i mentioned pushState in the answer...

Heretic Monkey Over a year ago

Yeah, I'm kind of surprised no one noted that in the question. I can also just type in the address bar...

Marc.2377 Over a year ago

I'll be back in a couple hours and test this; thanks for answering

dandavis Over a year ago

np. it's not a pattern i would use in a lib on production code, because of remotely possible perf or compat issues, but for a user-script it's perfect. when JS doesn't provide what you want, sometimes you have to cheat...

|

Collectives™ on Stack Overflow

How to observe a change in the URL using JavaScript?

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related