¿Cómo puedo detectar cambios en el hash de ubicación?

7 minutos de lectura

¿Como puedo detectar cambios en el hash de ubicacion
milmike

Estoy usando Ajax y hash para la navegación.

¿Hay alguna manera de comprobar si el window.location.hash cambiado así?

http://ejemplo.com/blah#123 para http://ejemplo.com/blah#456

Funciona si lo compruebo cuando se carga el documento.

Pero si tengo una navegación basada en #hash, no funciona cuando presiono el botón Atrás en el navegador (así que salto de blah#456 a blah#123).

Se muestra dentro del cuadro de dirección, pero no puedo capturarlo con JavaScript.

  • Echa un vistazo a este complemento de jquery: github.com/cowboy/jquery-hashchange

    – Xavi

    16 de enero de 2011 a las 22:38

  • Historia.js es compatible con la funcionalidad de administración de estado de HTML5 (¡por lo que ya no necesita usar hash!) y la degrada elegantemente a los navegadores HTML4 usando hashchanges. Es compatible con jQuery, MooTools y Prototype desde el primer momento.

    – baluptón

    30 de enero de 2011 a las 13:58

  • @balupton, en realidad nosotros Todavía necesito usar hashes para proporcionar comentarios al usuario de que se ha insertado una “nueva página” en su historial, a menos que utilice el cambio de URL como comentario.

    – Pacerier

    12/10/2014 a las 11:10

  • [Hasher]github.com/millermedeiros/hasher

    – Vishnoo Rath

    15 de enero de 2015 a las 14:42

  • hmm… creo que necesitas moar jQuery

    – Pingüino9

    22 de febrero de 2017 a las 14:42

La única forma de hacer esto realmente (y es cómo lo hace el ‘reallysimplehistory’) es establecer un intervalo que siga verificando el hash actual y comparándolo con lo que era antes, hacemos esto y permitimos que los suscriptores se suscriban a un cambio evento que activamos si el hash cambia… no es perfecto, pero los navegadores realmente no admiten este evento de forma nativa.


Actualice para mantener esta respuesta fresca:

Si está utilizando jQuery (que hoy en día debería ser algo fundamental para la mayoría), entonces una buena solución es usar la abstracción que le brinda jQuery al usar su sistema de eventos para escuchar los eventos de cambio de hash en el objeto de la ventana.

$(window).on('hashchange', function() {
  //.. work ..
});

Lo bueno aquí es que puede escribir código que ni siquiera necesita preocuparse por la compatibilidad con hashchange, sin embargo, SÍ necesita hacer algo de magia, en forma de una función jQuery algo menos conocida. jQuery eventos especiales.

Con esta característica, básicamente puede ejecutar un código de configuración para cualquier evento, la primera vez que alguien intenta usar el evento de alguna manera (como vincularse al evento).

En este código de configuración, puede verificar la compatibilidad del navegador nativo y, si el navegador no implementa esto de forma nativa, puede configurar un solo temporizador para sondear los cambios y activar el evento jQuery.

Esto desvincula completamente su código de la necesidad de comprender este problema de soporte, la implementación de un evento especial de este tipo es trivial (para obtener una versión funcional simple del 98%), pero ¿por qué hacer eso? cuando alguien ya lo ha hecho.

  • La última compilación de Firefox (3.6 alfa) ahora también es compatible con el evento de cambio de hash nativo: developer.mozilla.org/en/DOM/window.onhashchange Sin duda, vale la pena hacer una verificación de este evento, pero tenga en cuenta que IE8 le dirá que el evento existe cuando se ejecuta en el modo de compatibilidad con IE7… lamentablemente, el evento no se activa… deberá verificar el evento y que el navegador no parece ser IE7 … suspiro (o intente activar el evento con el método fireEvent de IE).

    – meandmycode

    18 de agosto de 2009 a las 13:50

  • En el momento de escribir este artículo, WebKit también activa hashchange evento, mientras que Safari (estable) aún no.

    – jholster

    19 de abril de 2010 a las 21:19

  • Solo para agregar otra actualización, el hashchange El evento ahora es ampliamente compatible: caniuse.com/#search=hash

    – Paystey

    12 de marzo de 2012 a las 9:39

  • ¿Soy el único que piensa que las respuestas jQuery no solicitadas son un dolor?

    – Lucas

    20 de agosto de 2012 a las 0:06

  • Esta respuesta ahora está en desuso.

    usuario1596138

    11/04/2014 a las 17:39

¿Como puedo detectar cambios en el hash de ubicacion
Millas

HTML5 especifica un hashchange evento. Este evento es ahora compatible con todos los navegadores modernos. Se agregó soporte en las siguientes versiones del navegador:

  • explorador de Internet 8
  • Firefox 3.6
  • cromo 5
  • Safari 5
  • Ópera 10.6

  • Actualización: FF 5, Safari 5 y Chrome 12 son compatibles con este evento a partir de junio de 2011.

    – james.garriss

    29 de junio de 2011 a las 14:55

  • Aquí está el CanIUse página para hashchange. Aquí está cambio hash en modo peculiar. El soporte de IE tiene errores con respecto a la distinción entre mayúsculas y minúsculas.

    – Tobú

    8 oct 2011 a las 10:42

  • @todos, no es necesario seguir agregando la respuesta en la sección de comentarios; para eso está el botón “Editar”. 🙂

    – Michael Martin-Smucker

    15 de junio de 2012 a las 12:48

  • uso: window.onhashchange = function() { doYourStuff(); }

    – Chris

    10 de agosto de 2015 a las 15:31

  • Documentación MDN de evento de cambio de hash.

    – lele1c

    9 oct 2015 a las 6:56

¿Como puedo detectar cambios en el hash de ubicacion
Khan Salahuddin

Tenga en cuenta que en el caso de Internet Explorer 7 e Internet Explorer 9, el if statment dará verdadero (para “onhashchange” en Windows), pero el window.onhashchange nunca se activará, por lo que es mejor almacenar el hash y verificarlo cada 100 milisegundos, ya sea que haya cambiado o no para todas las versiones de Internet Explorer.

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

EDITAR – Desde jQuery 1.9, $.browser.msie no es apoyado. Fuente: http://api.jquery.com/jquery.browser/

Hay muchos trucos para lidiar con History y window.location.hash en los navegadores IE:

Sé que esta no es una respuesta real, pero tal vez las notas de IE-History sean útiles para alguien.

1646957650 681 ¿Como puedo detectar cambios en el hash de ubicacion
edfuh

Firefox ha tenido un evento onhashchange desde 3.6. Ver ventana.onhashchange.

1646957650 634 ¿Como puedo detectar cambios en el hash de ubicacion
CJ.

Ben Alman tiene un excelente complemento de jQuery para lidiar con esto: http://benalman.com/projects/jquery-hashchange-plugin/

Si no está utilizando jQuery, puede ser una referencia interesante para diseccionar.

1646957651 309 ¿Como puedo detectar cambios en el hash de ubicacion
Comunidad

Podría implementar fácilmente un observador (el método “ver”) en la propiedad “hash” del objeto “ventana.ubicación”.

Firefox tiene su implementación propia para ver cambios de objetopero si usa alguna otra implementación (como Esté atento a los cambios en las propiedades de los objetos en JavaScript) – para otros navegadores, eso hará el truco.

El código se verá así:

window.location.watch(
    'hash',
    function(id,oldVal,newVal){
        console.log("the window's hash value has changed from "+oldval+" to "+newVal);
    }
);

Entonces puedes probarlo:

var myHashLink = "home";
window.location = window.location + "#" + myHashLink;

Y, por supuesto, eso activará su función de observador.

  • Mejor uso: ventana.ubicación.href en lugar de ventana.ubicación.

    – Codebeat

    10 mayo 2012 a las 21:01

  • Está viendo window.location.hash, no window.location.

    – indefinido

    25 de septiembre de 2012 a las 23:56

  • @BrianMortenson: según los documentos (desarrollador.mozilla.org/en-US/docs/JavaScript/Reference/…) debes aplicar watch al objeto que posee la propiedad que está cambiando y desea observarlo.

    – gion_13

    26 de septiembre de 2012 a las 7:41


  • @gion_13 Sí, eso es exactamente lo que estaba tratando de señalar. Por ‘Él’ me refería a ti, y estaba dirigido al comentario de Erwinus. Debería haber sido más claro. Gracias por tu comentario aclaratorio.

    – indefinido

    26 de septiembre de 2012 a las 16:05

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad