21

Note

Solution should be in pure Javascript - No external library and frameworks.

In SPA, Everything gets routed using routing mechanism. I just want to listen to an even whenever any part of url changes (Not only hash. Any change I want to detect)

Following is example of SPA,

https://www.google.in/
https://www.google.in/women 
https://www.google.in/girl

Now whenever url changes from https://www.hopscotch.in/ to https://www.hopscotch.in/women, I want to capture that event.

I tried,

window.addEventListener("hashchange",function(event){
    console.log(this); // this gets fired only when hash changes
});
Deepak Ingole
  • 13,671
  • 10
  • 44
  • 76

3 Answers3

27

In addition to Quentin's answer: setInterval is a pretty bad way to check for these changes: it's either never on time or gets fired too often.

What you really should do is watch for user-input events. Click is the most obvious one but don't forget about keyboard input. Should one of these events occur it will mostly just take one tick for the url to change. So in a quick mockup in code it's:

let url = location.href;
document.body.addEventListener('click', ()=>{
    requestAnimationFrame(()=>{
      url!==location.href&&console.log('url changed');
      url = location.href;
    });
}, true);

(just drop it into Github console to see it work)

Together with a popstate listener this should be enough for most use cases.

Sjeiti
  • 2,197
  • 1
  • 30
  • 32
  • It works well with `setTimeout` instead of `requestAnimationFrame` – allenhwkim Jul 19 '21 at 19:04
  • It might, just so as long you are aware of the dangers of using `setTimeout` in terms of timing. Plus `setTimeout` is also a delayed `eval`, which makes it somewhat evil. – Sjeiti Jul 20 '21 at 07:26
13

Under normal circumstances, there isn't an event when the URL changes. You are loading a new document (although you have load and so on)

If you are setting a new URL with JavaScript (i.e. with pushState) then there isn't an event, but you don't need one because you're already explicitly writing code around it, so you just add whatever else you need to that code.

You'll get a popstate event if the URL changes back though your pushState history via the browser back button or similar.

Consequently, there is no good generic way to hook into every SPA. The closest you could come would be to use setInterval and inspect the value of location.href to see if it changed since the last inspection.

Quentin
  • 857,932
  • 118
  • 1,152
  • 1,264
  • Thanks for the quick help. push and pop state wont work in my case. Will have to dig more to find what else can be done – Deepak Ingole Jun 07 '16 at 10:52
3

This script will let you detect changes to a URL within a SPA:

var previousUrl = '';
var observer = new MutationObserver(function(mutations) {
  if (location.href !== previousUrl) {
      previousUrl = location.href;
      console.log(`URL changed to ${location.href}`);
    }
});

observer.observe();

When you're done observing, be sure to cancel the observer, using the variable from the previous example:

observer.disconnect();
d-_-b
  • 19,976
  • 37
  • 134
  • 224