Question

54

Listener event for when URL parameters change

rated 0 times [ 57] [ 3] / answers: 1 / hits: 15601 / 7 Years ago, thu, december 21, 2017, 12:00:00

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!)

User lands on www.foobar.com

User does something, url changes to www.foobar.com?filter=hello

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)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

josefn

Add To Favorites

Follow

Total Points: 251

Total Questions: 93

Total Answers: 84

Location: Senegal

Member since Fri, Aug 21, 2020

4 Years ago

josefn questions

1 Vue 3: How to update component props value correctly using composition api?

Thu, Nov 11, 21, 00:00, 3 Years ago

1 Does Array.find method return a copy or a reference of the matched element form given array?

Sun, Jun 21, 20, 00:00, 4 Years ago

1 How to get the modulus and exponent of an RSA public key in Node.js

Wed, Apr 29, 20, 00:00, 4 Years ago

1 How to use setTimeout with a Loader

Sat, Mar 28, 20, 00:00, 4 Years ago

1 How do I implement Socket.IO in an electron app?

Fri, Feb 21, 20, 00:00, 4 Years ago

View All

answered 7 Years ago alonso · Accepted Answer

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