jQuery – evento hashchange

Estoy usando:

$(window).bind( 'hashchange', function(e) { }); 

vincular una function al evento de cambio de hash. Esto parece funcionar en IE8, Firefox y Chrome, pero no en Safari y supongo que no en versiones anteriores de IE. Para estos browseres, deseo desactivar mi código JavaScript que usa el evento hash y hashchange .

¿Hay alguna manera con jQuery de que pueda detectar si el browser admite el evento hashchange ? Tal vez algo con jQuery.support

Puede detectar si el browser admite el evento de la siguiente manera:

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

Ver también:

  • Detección de soporte de events sin detección de browser
  • Emular onhashchange sin setInterval
  • window.onhashchange

Hay un complemento de hashchange que resume la funcionalidad y los problemas de browser cruzado disponibles aquí .

Un enfoque diferente a su problema …

Hay 3 forms de vincular el evento hashchange a un método:

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

O

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

O

 <body onhashchange="doThisWhenTheHashChanges();"> 

Todos estos funcionan con IE 9, FF 5, Safari 5 y Chrome 12 en Win 7.

Pruebe el sitio oficial de Mozilla: https://developer.mozilla.org/en/DOM/window.onhashchange

cite de la siguiente manera:

 if ("onhashchange" in window) { alert("The browser supports the hashchange event!"); } function locationHashChanged() { if (location.hash === "#somecoolfeature") { somecoolfeature(); } } window.onhashchange = locationHashChanged; 

Me encontré con el mismo problema (falta del evento hashchange en IE7). Una solución alternativa adecuada para mis propósitos era vincular el evento click de los enlaces de cambio de hash.

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

Tenga en count que en el caso de IE 7 e IE 9 si statment dará verdadero para ("onhashchange" en Windows) pero el window.onhashchange nunca se disparará, por lo que es mejor almacenar el hash y verificarlo cada 100 milisegundos ya sea que se haya cambiado o no. para todas las versiones de 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); } 

¿Qué hay de usar una forma diferente en lugar del evento hash y escuchar popstate como?

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

Este método funciona bien en la mayoría de los browseres que he probado hasta ahora.

Una respuesta actualizada aquí a partir de 2017, si alguien lo necesita, es que onhashchange está bien soportado en todos los principales browseres. Ver caniuse para más detalles. Para usarlo con jQuery, no se necesita ningún complemento:

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

Ocasionalmente, me encuentro con sistemas henetworkingados donde las URL hashbang todavía se usan y esto es útil. Si está creando algo nuevo y usando enlaces hash, le sugiero que considere utilizar la API pushState HTML5 en su lugar.

este pequeño plugin jQuery es muy simple de usar: https://github.com/finnlabs/jquery.observehashchange/

Creo que Chris Coyier tiene una solución para ese problema de hash, eche un vistazo a su screencast:

Mejores prácticas con contenido dynamic

Use Modernizr para la detección de capacidades de funciones. En general, jQuery ofrece detectar las características del browser: http://api.jquery.com/jQuery.support/ . Sin embargo, hashchange no está en la list.

La wiki de Modernizr ofrece una list de bibliotecas para agregar capacidades HTML5 a browseres antiguos. La list de hashchange incluye un puntero al proyecto API de historial de HTML5 , que parece ofrecer la funcionalidad que necesitaría si quisiera emular el comportamiento en browseres antiguos.

Aquí está la versión actualizada de @ johnny.rodgers

Hope ayuda a alguien

 // 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 stonetworkinghash = window.location.hash; window.setInterval(function(){ if(window.location.hash != stonetworkinghash){ stonetworkinghash = window.location.hash; alert(url); } }, 100); } 
    Intereting Posts