How to detect URL changes with jQuery

Question

How can jQuery detect changes to a url?

For example: If a user goes to a page site.com/faq/ nothing shows, but if he goes to site.com/faq/#open jquery detects it and does something.

Solution 1

Try This

$(window).on('hashchange', function(e){
 // Your Code goes here
});

Its working for me

Solution 2

You can use the hashchange event.

function hashchanged(){
  var hash = location.hash.replace( /^#/, '' );
 //your code
}

window.addEventListener("hashchange", hashchanged, false);

or integrate a jquery hashchange plugin

$(function(){

  // Bind the event.
  $(window).hashchange(hashchanged);

  // Trigger the event (useful on page load).
  hashchanged();

});

function hashchanged(){
 var hash = location.hash.replace( /^#/, '' );
 //your code
}

Solution 3

Simply look at window.location.hash on page load:

$(document).ready(function() {
    if(window.location.hash === "open")
    {
        //Show something
    }
});

Or bind to the hashchange event of the window:

$(document).ready(function() {
    $(window).hashchange(hashchanged);
});

function hashchanged()
{
    //Show something
}

Solution 4

Try this:

if (window.location.hash) {
    // Fragment exists, do something with it
    var fragment = window.location.hash;
}

Just for reference, the part of a url specified by the # is called a 'fragment'

Solution 5

If you have a url of site.com/faq/#open, then you can do

var hash = window.location.hash

to get hash = 'open'

View more solutions