CODEWITHSUNDEEP
javascript
Deepak Ingole
Deepak Ingole

Reputation: 15742

How to detect URL changes in SPA

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

Upvotes: 29

Views: 18925

Answers (4)

Giorgio Tempesta
Giorgio Tempesta

Reputation: 2059

I've implemented d-_-b's answer in my codebase, but I figured out that (at least in the website I'm working on) when the URL changed we still had the title from the previous page, so I changed it to listen to changes to the document.title instead of the location.href.

Here is my working solution:

let currentTitle = document.title;
const observer = new MutationObserver(function (mutations) {
  if (document.title !== currentTitle) {
    console.log('title changed', document.title);
    console.log('location also changed', document.location.href);
    // here you can add your own code
    currentTitle = document.title;
  }
});

const config = { subtree: true, childList: true };
observer.observe(document, config);

window.addEventListener('beforeunload', function (event) {
  observer.disconnect();
});

Upvotes: 0

d-_-b
d-_-b

Reputation: 23171

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}`);
    }
});

const config = {subtree: true, childList: true};
observer.observe(document, config);

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

observer.disconnect();

Upvotes: 13

Sjeiti
Sjeiti

Reputation: 2648

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.

Upvotes: 30

Quentin
Quentin

Reputation: 943537

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.

Upvotes: 12

Related Questions