Check URL any time URL change in JavaScript

Question

I am using the following code to change the display of elements. I use jQuery and my problem is that it only checks URL in the begging and in the next change of URL it is not working.

    <script>
        alert(window.location.href);
    
        if (window.location.href.indexOf("drinks=spirits") > -1) {
alert("Hello! I am an alert box!!");
    
    }
    
    </script>

For example: I follow this order:

1- On the first visit, the URL is HTTP://example.com/drinks=spirits and it works.

2- Then I click on a filter, since I use ajax without reloading the page the URL changes to HTTP://example.com/drinks=spirits&price=less_10.

3- Then again when I remove the filter (again the page is not reloaded, it only removes the query) and the URL will be HTTP://example.com/drinks=spirits. Now the alert does not appear!

I am looking for a solution that shows the alert anytime users redirects to the HTTP://example.com/drinks=spirits

Wais Kamal · Accepted Answer · 2021-04-23 21:06:56Z

1

You need the hashchange event listener:

window.addEventListener("hashchange", function() {
  alert(window.location.href);

  if (window.location.href.indexOf("drinks=spirits") > -1) {
    alert("Hello! I am an alert box!!");
  }
});

answered Apr 23, 2021 at 21:06

Wais Kamal

6,2503 gold badges21 silver badges47 bronze badges

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

1 Comment

Sallar Rabiei Over a year ago

Thanks, it is not working for me. I try : window.addEventListener("hashchange", function() { alert(window.location.href); }); but it doesn't alert anything.

Collectives™ on Stack Overflow

Check URL any time URL change in JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related