En la ventana.ubicación.hash - el Cambio?

HTML5 especifica un evento hashchange . Este evento es ahora soportado por todos los navegadores modernos. Se agregó soporte en las siguientes versiones de navegador:

• Internet Explorer 8
• Firefox 3.6
• Cromo 5
• Safari 5
• Opera 10.6

Tenga en cuenta que en el caso de Internet Explorer 7 e Internet Explorer 9 el estado if dará verdadero (para "onhashchange" en windows), pero el window.onhashchange nunca se disparará, por lo que es mejor almacenar hash y comprobarlo después de cada 100 milisegundos si ha 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 compatible. Fuente: http://api.jquery.com/jquery.browser/

Hay muchos trucos para lidiar con la historia y la ventana.ubicación.hash en navegadores IE:

• Como dijo la pregunta original, si pasas de la página a. html#b a. html#c, y luego presionas el botón atrás, el navegador no sabe que la página ha cambiado. Permítanme decirlo con un ejemplo: ventana.ubicación.href será 'a. html # c' , no importa si estás en a. html#b o a. html#c.

• En realidad, a. html#b y a. html#c se almacenan en el historial solo si los elementos ' 'and' ' exists previously in the page.

• Sin embargo, si coloca un iframe dentro de una página, navegue desde un.html#b a un.html#c en ese iframe y luego presione el botón atrás, iframe.contentWindow.documento.ubicación.href changes as expected.

• Si utiliza ' documento.domain = algo' en tu código, entonces no puedes acceder a iframe.contentWindow.documento.open ()' (y muchos Gestores de Historial lo hacen)

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

Firefox ha tenido un evento onhashchange desde la versión 3.6. Véase ventana.onhashchange.

Ben Alman tiene un gran plugin 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 "watch") en la propiedad "hash" de "window.ubicación " objeto.

Firefox tiene su propia implementación para ver los cambios de objeto, pero si usa alguna otra implementación (como Observe 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 que será activa tu función de observador.

Una implementación decente se puede encontrar en http://code.google.com/p/reallysimplehistory / . El único (pero también) problema y error que tiene es: en Internet Explorer modificar el hash de ubicación manualmente restablecerá toda la pila de historial (este es un problema del navegador y no se puede resolver).

Tenga en cuenta que Internet Explorer 8 tiene soporte para el evento "hashchange", y como se está convirtiendo en parte de HTML5, puede esperar que otros navegadores se pongan al día.

Estaba usando esto en una aplicación react para hacer que la URL mostrara diferentes parámetros dependiendo de la vista en la que estuviera el usuario.

Observé el parámetro hash usando

window.addEventListener('hashchange', doSomethingWithChangeFunction());

Entonces

doSomethingWithChangeFunction () { 
    // Get new hash value
    let urlParam = window.location.hash;
    // Do something with new hash value
};

Funcionó un placer, funciona con los botones del navegador hacia adelante y hacia atrás y también en el historial del navegador.

Otra gran implementación es jQuery History que usará el evento nativo onhashchange si es soportado por el navegador, si no usará un iframe o intervalo apropiadamente para el navegador para asegurar que toda la funcionalidad esperada sea emulada con éxito. También proporciona una interfaz agradable para enlazar a ciertos estados.

Otro proyecto que vale la pena señalar también es jQuery Ajaxy que es más o menos una extensión para el historial de jQuery para agregar ajax a la mezcla. Como cuando comienzas a usar ajax con hashes, se vuelve bastante complicado !

var page_url = 'http://www.yoursite.com/'; // full path leading up to hash;
var current_url_w_hash = page_url + window.location.hash; // now you might have something like: http://www.yoursite.com/#123

function TrackHash() {
    if (document.location != page_url + current_url_w_hash) {
        window.location = document.location;
    }
    return false;
}
var RunTabs = setInterval(TrackHash, 200);

Eso es todo... ahora, cada vez que presione los botones atrás o adelante, la página se recargará según el nuevo valor hash.

He estado usando path.js para mi enrutamiento del lado del cliente. He encontrado que es bastante sucinto y ligero (también se ha publicado en NPM también), y hace uso de la navegación basada en hash.

Camino.js NPM

Camino.js GitHub

Usé un plugin de jQuery, HUtil, y escribí un YUI Historia como interfaz en la parte superior de la misma.

Compruébalo una vez. Si necesitas ayuda, puedo ayudarte.