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

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.

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.

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

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:

• Como decía la pregunta original, si va de la página a.html#b a a.html#c, y luego presiona el botón Atrás, el navegador no sabe que la página ha cambiado. Déjame decirlo con un ejemplo: window.location.href será ‘a.html#c’, sin importar si estás en a.html#bo a.html#c.

• En realidad, a.html#b y a.html#c se almacenan en el historial solamente si los elementos ‘‘ y ‘‘ existen previamente en la página.

• Sin embargo, si coloca un iframe dentro de una página, navegue de a.html#b a a.html#c en ese iframe y luego presione el botón Atrás, iframe.contentWindow.document.location.href cambia como se esperaba.

• Si usa ‘document.domain=algo‘ en su código, entonces no puede acceder a iframe.contentWindow.document.open()’ (y muchos administradores de historial lo hacen)

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

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.

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.