jQuery - evento hashchange

Question 1

Estoy usando:

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

para vincular una función al evento de cambio de hash. Esto parece funcionar en IE8, Firefox y Chrome, pero no en Safari y supongo que no en la versión anterior de IE. Para estos navegadores, quiero deshabilitar mi código JavaScript que usa el hash y el hashchangeevento.

¿Hay alguna forma con jQuery que pueda detectar si el navegador es compatible con el hashchangeevento? Quizás algo con jQuery.support...

Question 2

Puede detectar si el navegador admite el evento mediante:

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

Ver también:

Question 3

Una respuesta actualizada aquí a partir de 2017, si alguien la necesita, es que onhashchange es compatible con todos los navegadores principales. Consulte caniuse para obtener más detalles. Para usarlo con jQuery no se necesita ningún complemento:

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

De vez en cuando me encuentro con sistemas heredados en los que todavía se usan las URL de hashbang y esto es útil. Si está creando algo nuevo y usando enlaces hash, le sugiero que considere usar la API pushState de HTML5 en su lugar.

Question 4

Hay un complemento hashchange que resume la funcionalidad y los problemas entre navegadores disponibles aquí .

Question 5

Un enfoque diferente a su problema ...

Hay 3 formas 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.

Question 6

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

cite lo siguiente:

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

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

window.onhashchange = locationHashChanged;

Question 7

Me encontré con el mismo problema (falta de evento hashchange en IE7). Una solución alternativa que se adaptaba a mis propósitos era vincular el evento de clic 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>

Question 8

Tenga en cuenta que en el caso de IE 7 e IE 9, si la declaración dará verdadero para ("onhashchange" en Windows) pero el window.onhashchange nunca se activará, por lo que es mejor almacenar el hash y verificarlo después de cada 100 milisegundos si ha 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);
    }

Question 9

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

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 navegadores que he probado hasta ahora.

Question 10

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

Question 11

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

Prácticas recomendadas con contenido dinámico

Question 12

Utilice Modernizr para la detección de funciones. En general, jQuery ofrece detectar funciones del navegador: http://api.jquery.com/jQuery.support/ . Sin embargo, hashchange no está en la lista.

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

Question 13

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

La esperanza 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 storedhash = window.location.hash;
    window.setInterval(function(){
        if(window.location.hash != storedhash){
            storedhash = window.location.hash;
            alert(url);
        }
    }, 100);
}