jQuery - hashchange event

javascript jquery hashchange browser-state

174,869

Solution 1

You can detect if the browser supports the event by:

if ("onhashchange" in window) {
  //...
}

Solution 2

An updated answer here as of 2017, should anyone need it, is that onhashchange is well supported in all major browsers. See caniuse for details. To use it with jQuery no plugin is needed:

$( window ).on( 'hashchange', function( e ) {
    console.log( 'hash changed' );
} );

Occasionally I come across legacy systems where hashbang URL's are still used and this is helpful. If you're building something new and using hash links I highly suggest you consider using the HTML5 pushState API instead.

Solution 3

There is a hashchange plug-in which wraps up the functionality and cross browser issues available here.

Solution 4

A different approach to your problem...

There are 3 ways to bind the hashchange event to a method:

<script>
    window.onhashchange = doThisWhenTheHashChanges;
</script>

<script>
    window.addEventListener("hashchange", doThisWhenTheHashChanges, false);
</script>

<body onhashchange="doThisWhenTheHashChanges();">

These all work with IE 9, FF 5, Safari 5, and Chrome 12 on Win 7.

Solution 5

try Mozilla official site: https://developer.mozilla.org/en/DOM/window.onhashchange

cite as follow:

if ("onhashchange" in window) {
    alert("The browser supports the hashchange event!");
}

function locationHashChanged() {
    if (location.hash === "#somecoolfeature") {
        somecoolfeature();
    }
}

window.onhashchange = locationHashChanged;

View more solutions

174,869

Author by

Ian Herbert

Updated on October 11, 2020

Comments

Ian Herbert over 3 years
I am using:
```
$(window).bind( 'hashchange', function(e) { });
```
to bind a function to the hash change event. This seems to work in IE8, Firefox and Chrome, but not in Safari and I assume not in earlier version of IE. For these browsers, I want to disable my JavaScript code that uses the hash and hashchange event.

Is there a way with jQuery that i can detect if the browser supports the hashchange event? Maybe something with jQuery.support...
Ian Herbert almost 14 years

Thank you, I will look into that.
Ian Herbert almost 14 years

Thanks for that and for the quick response.
Vikas about 13 years

Note that IE8 running in IE7 compatibility mode reports true for 'onhashchange' in window, even though the event isn't supported -from jQuery Mobile
Dwarf almost 13 years

Isn't this too much for the browser to handle? to poll for a hash change every 100ms?
enloz over 12 years

your sample code made my IE8 alerting until i opened task manager and killed process :)
Nick over 10 years

that's because there's a typo, instead of "storedHash" use "prevHash" and it will work. He basically used a different variable name from how it's been declared.
Arturo Torres Sánchez over 8 years

Popstate is even newer than hashchange. For instance, it's not supported in IE < 10.
James Westgate about 8 years

Only required for < IE8
tobymackenzie over 7 years

you could use $('a[href^="#"]') to get links to hrefs beginning with a hash, avoiding the need for a class add
Daniel Dewhurst about 6 years

This works well, use window.location.hash to access the current hash.