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

User · Answer

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

User · Answer

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    lt a class  hash-changer  href   foo  gt Foo lt  a gt    lt script type  text javascript  gt   if    onhashchange  in window   amp  amp      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              lt  script gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

I think Chris Coyier has solution for that hashing problem  have a look at his screencast   Best Practices with Dynamic Content

User · Answer

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

User · Answer

You can detect if the browser supports the event by   if   onhashchange  in window                See also     Detecting event support without browser sniffing Emulating onhashchange without setInterval window onhashchange

User · Answer

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

User · Answer

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

User · Answer

A different approach to your problem     There are 3 ways to bind the hashchange event to a method    lt script gt      window onhashchange   doThisWhenTheHashChanges   lt  script gt    Or   lt script gt      window addEventListener  hashchange   doThisWhenTheHashChanges  false    lt  script gt    Or   lt body onhashchange  doThisWhenTheHashChanges     gt    These all work with IE 9  FF 5  Safari 5  and Chrome 12 on Win 7

User · Answer

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

[javascript] jQuery - hashchange event

Examples related to javascript

Examples related to jquery

Examples related to hashchange

Examples related to browser-state