Pregunta jQuery - evento hashchange


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, quiero desactivar mi código JavaScript que usa el hash y hashchange evento.

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


74
2018-06-22 05:20


origen


Respuestas:


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

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

Ver también:


67
2018-06-22 05:22



Hay un complemento de hashchange que completa la funcionalidad y los problemas del navegador cruzado disponible aquí.


17
2018-06-22 05:53



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.


17
2018-06-29 15:25



Una respuesta actualizada aquí a partir de 2017, si alguien lo necesita, es que onhashchange está bien soportado en todos los principales navegadores. Ver Puedo usar para 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.


8
2017-10-10 14:41



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

7
2017-09-07 03:00



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>

3
2017-07-06 22:12



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);
    }

2
2018-06-28 15:27



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


2
2017-09-02 08:37



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


1
2017-08-08 06:50