jQuery - hashchange event

Question

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...

[jQuery hashchange event](http://benalman.com/projects/jquery-hashchange-plugin/) - jQuery plugin works perfect, even in IE8. + it's very easy to use it :) — enloz, Sep 16 '11 at 03:38

score 70 · Answer 1 · answered Jun 22 '10 at 05:22

70

You can detect if the browser supports the event by:

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

See also:

answered Jun 22 '10 at 05:22

Christian C. Salvadó

807,428
183
922
838

Thanks for that and for the quick response. – Ian Herbert Jun 22 '10 at 05:30
19

Note that IE8 running in IE7 compatibility mode reports true for 'onhashchange' in window, even though the event isn't supported -from jQuery Mobile – Vikas May 19 '11 at 06:16

Kevinleary.net · Answer 2 · 2017-10-10T15:52:27.843

47

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.

edited Oct 10 '17 at 15:52

answered Oct 10 '17 at 14:41

Kevinleary.net

8,851
3
54
46

3

This works well, use `window.location.hash` to access the current hash. – Daniel Dewhurst Mar 08 '18 at 10:16

score 19 · Answer 3 · answered Jun 22 '10 at 05:53

19

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

answered Jun 22 '10 at 05:53

James Westgate

11,306
8
61
68

Only required for < IE8 – James Westgate Apr 14 '16 at 10:09

score 18 · Answer 4 · answered Jun 29 '11 at 15:25

A different approach to your problem...

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

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

Or

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

Or

<body onhashchange="doThisWhenTheHashChanges();">

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

score 8 · Answer 5 · edited Sep 07 '11 at 12:49

8

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;

edited Sep 07 '11 at 12:49

Dan Short

9,598
2
28
53

answered Sep 07 '11 at 03:00

Paul Lan

665
2
9
12

score 3 · Answer 6 · answered Jul 06 '12 at 22:12

I just ran into the same problem (lack of hashchange event in IE7). A workaround that suited for my purposes was to bind the click event of the hash-changing links.

<a class='hash-changer' href='#foo'>Foo</a>

<script type='text/javascript'>

if (("onhashchange" in window) && !($.browser.msie)) { 

    //modern browsers 
    $(window).bind('hashchange', function() {
        var hash = window.location.hash.replace(/^#/,'');
        //do whatever you need with the hash
    });

} else {

    //IE and browsers that don't support hashchange
    $('a.hash-changer').bind('click', function() {
        var hash = $(this).attr('href').replace(/^#/,'');
        //do whatever you need with the hash
    });

}

</script>

you could use `$('a[href^="#"]')` to get links to `href`s beginning with a hash, avoiding the need for a class add — tobymackenzie, Sep 21 '16 at 04:27

score 3 · Answer 7 · answered Sep 02 '15 at 08:37

3

What about using a different way instead of the hash event and listen to popstate like.

window.addEventListener('popstate', function(event)
{
    if(window.location.hash) {
            var hash = window.location.hash;
            console.log(hash);
    }
});

This method works fine in most browsers i have tried so far.

answered Sep 02 '15 at 08:37

Sven van den Boogaart

11,833
21
86
169

1

Popstate is even newer than hashchange. For instance, it's not supported in IE < 10. – Arturo Torres Sánchez Dec 30 '15 at 18:34

score 3 · Answer 8 · edited Feb 28 '14 at 19:03

3

Note that in case of IE 7 and IE 9 if statment will give true for ("onhashchange" in windows) but the window.onhashchange will never fire, so its better to store hash and check it after every 100 millisecond whether its changed or not for all versions of IE.

    if (("onhashchange" in window) && !($.browser.msie)) { 
         window.onhashchange = function () { 
              alert(window.location.hash);             
         }            
         // Or $(window).bind( 'hashchange',function(e) {  
         //       alert(window.location.hash); 
         //   });              
    }
    else { 
        var prevHash = window.location.hash;
        window.setInterval(function () {
           if (window.location.hash != prevHash) {
              prevHash = window.location.hash;
              alert(window.location.hash);
           }
        }, 100);
    }

edited Feb 28 '14 at 19:03

Ivan Durst

1,163
2
12
24

answered Jun 28 '11 at 15:27

Khan Salahuddin

585
4
4

2

Isn't this too much for the browser to handle? to poll for a hash change every 100ms? – adardesign Jul 06 '11 at 17:53
5

your sample code made my IE8 alerting until i opened task manager and killed process :) – enloz Sep 16 '11 at 03:29
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. – Nick Sep 26 '13 at 05:57

score 1 · Answer 9 · answered Aug 08 '12 at 06:50

1

this tiny jQuery plugin is very simple to use: https://github.com/finnlabs/jquery.observehashchange/

answered Aug 08 '12 at 06:50

Morteza

2,097
5
28
47

score 0 · Answer 10 · answered May 09 '13 at 10:06

Use Modernizr for detection of feature capabilities. In general jQuery offers to detect browser features: http://api.jquery.com/jQuery.support/. However, hashchange is not on the list.

The wiki of Modernizr offers a list of libraries to add HTML5 capabilities to old browsers. The list for hashchange includes a pointer to the project HTML5 History API, which seems to offer the functionality you would need if you wanted to emulate the behavior in old browsers.

score 0 · Answer 11 · answered Apr 15 '15 at 12:18

Here is updated version of @johnny.rodgers

Hope helps someone.

// ie9 ve ie7 return true but never fire, lets remove ie less then 10
if(("onhashchange" in window) && navigator.userAgent.toLowerCase().indexOf('msie') == -1){ // event supported?
    window.onhashchange = function(){
        var url = window.location.hash.substring(1);
        alert(url);
    }
}
else{ // event not supported:
    var storedhash = window.location.hash;
    window.setInterval(function(){
        if(window.location.hash != storedhash){
            storedhash = window.location.hash;
            alert(url);
        }
    }, 100);
}

score 0 · Answer 12 · answered Jun 22 '10 at 05:24

0

I think Chris Coyier has solution for that hashing problem, have a look at his screencast:

Best Practices with Dynamic Content

answered Jun 22 '10 at 05:24

Sarfraz

377,238
77
533
578

jQuery - hashchange event

12 Answers12

Linked