javascript - event - hashchange jquery

jQuery-evento hashchange

Question

Estoy usando:

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

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 versiones anteriores de IE. Para estos navegadores, deseo desactivar mi código JavaScript que usa el evento hash y hashchange .

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

Answer 1

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

Answer 2

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

Answer 3

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

Mejores prácticas con contenido dinámico

Answer 4

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

Answer 5

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>

Answer 6

Pruebe el sitio oficial de Mozilla: 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;

Answer 7

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

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

Ver también:

• Detección de soporte de eventos sin detección de navegador
• Emular onhashchange sin setInterval
• window.onhashchange

Answer 8

Tenga en cuenta 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 comprobarlo 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);
    }

Answer 9

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.

Answer 10

Una respuesta actualizada aquí a partir de 2017, si alguien lo necesita, es que onhashchange está bien soportado en todos los principales navegadores. 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 heredados donde las URL hashbang todavía se usan y esto es útil. Si está creando algo nuevo y utilizando enlaces hash, le sugiero que considere utilizar la API pushState HTML5 en su lugar.

Answer 11

Use Modernizr para la detección de capacidades de funciones. En general, jQuery ofrece detectar las características 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 al proyecto API de historial de HTML5 , que parece ofrecer la funcionalidad que necesitaría si quisiera emular el comportamiento en navegadores antiguos.

Answer 12

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