Listener event for when URL parameters change

Question

I have a single page app with pagination and filters, and need to detect when the current URL changes at all. Is there not a simple way to add a listener to the current URL and trigger something when it changes? (No setting intervals either!)

1. User lands on www.foobar.com
2. User does something, url changes to www.foobar.com?filter=hello
3. My function runs

I have tried both onhashchange, and tried unbeforeunload, and neither are relevant for this.

window.onbeforeunload = function(e) {
   alert ('url changed!');
};

window.onhashchange = function() { 
alert ('url changed!');  
}

Is there a way to add a listener to the URL, and trigger something anytime it changes at all? (again, single page app so no refresh)

Answer 1

If you don't want to use setInterval, you can override the history.pushState event:

(function(history){
    const pushState = history.pushState;
    history.pushState = function(state) {
        if (typeof history.onpushstate == "function") {
            history.onpushstate({state: state});
        }
        // Call your custom function here
        return pushState.apply(history, arguments);
    }
})(window.history);

Answer 2

you can use MutationObserver to listen to URL changes amongst other things:

let previousUrl = '';
const observer = new MutationObserver(function(mutations) {
  if (window.location.href !== previousUrl) {
      previousUrl = window.location.href;
      console.log(`URL changed from ${previousUrl} to ${window.location.href}`);
    }
});
const config = {subtree: true, childList: true};

// start listening to changes
observer.observe(document, config);

// stop listening to changes
// observer.disconnect();