Pregunta En - window.location.hash - ¿Cambiar?


Estoy usando Ajax y hash para la navegación.

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

http://example.com/blah# 123 a http://example.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 bla # 456 a bla # 123).

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


524
2018-03-25 09:10


origen


Respuestas:


La única forma de hacer esto (y así es como lo hace la'historia realmente simple ') consiste en establecer un intervalo que siga comprobando el hash actual y compararlo con lo que era antes, hacemos esto y permitimos que los suscriptores se suscriban a un cambio evento que disparamos 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 debería ser un tanto fundamental para la mayoría), entonces una buena solución es usar la abstracción que jQuery le brinda al usar su sistema de eventos para escuchar eventos de intercambio en el objeto de la ventana.

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

Lo bueno de esto es que puedes escribir código que no necesita preocuparse por el soporte de hashchange, sin embargo, debes HACER algo de magia, en forma de una característica jQuery algo menos conocida. jQuery eventos especiales.

Con esta función, básicamente puedes ejecutar algún código de configuración para cualquier evento, la primera vez que alguien intenta usar el evento de alguna manera (como por ejemplo vincularse al evento).

En este código de configuración puede verificar si hay compatibilidad con el navegador nativo y si el navegador no lo implementa de forma nativa, puede configurar un solo temporizador para buscar cambios y activar el evento jQuery.

Esto desvincula por completo 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 simple que funcione al 98%), pero ¿por qué eso? cuando alguien más ya tiene.


595
2018-03-25 10:33



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

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

270
2018-06-28 15:42



Tenga en cuenta que en el caso de Internet Explorer 7 e Internet Explorer 9, if statment dará verdadero (para "onhashchange" en windows), pero el window.onhashchange nunca se disparará, por lo que es mejor almacenar el hash y verificarlo cada 100 milisegundos, ya sea que se haya modificado 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/


50
2017-10-30 00:19



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

  • Como decía la pregunta original, si pasas de la página a.html # b a 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: window.location.href será 'a.html # c', sin importar si está en a.html # by a.html # c.

  • En realidad, a.html # b y a.html # c se almacenan en la historia solamente si los elementos '<a name="#b">' y '<a name="#c">' 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 según lo esperado.

  • Si usa 'document.domain =alguna cosa'en su código, entonces no puede acceder a iframe.contentWindow.document.open ()' (y muchos gestores de historial lo hacen)

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


13
2018-06-24 17:29



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


12
2017-10-19 17:46



Ben Alman tiene un gran plugin jQuery para hacer frente a esto: http://benalman.com/projects/jquery-hashchange-plugin/

Si no usas jQuery, puede ser una referencia interesante para diseccionar.


11
2017-10-29 09:04



Podría implementar fácilmente un observador (el método "mirar") en la propiedad "hash" del objeto "window.location".

Firefox tiene su propia implementación para ver los cambios de objeto, pero 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.


9
2018-03-25 09:31



Se puede encontrar una implementación decente en http://code.google.com/p/reallysimplehistory/. El único (y también) problema y error que tiene es que en Internet Explorer la modificación del hash de ubicación manualmente restablecerá toda la pila del 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.


6
2017-12-07 14:36



Estaba usando esto en una aplicación de reacción para hacer que la URL muestre diferentes parámetros dependiendo de en qué vista esté el usuario.

Vi 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ó como un regalo, funciona con los botones del navegador hacia adelante y hacia atrás y también en el historial del navegador.


2
2017-08-28 17:00



Otra gran implementación es jQuery History que usará el evento onhashchange nativo si es compatible con el navegador, si no utilizará un iframe o intervalo de manera apropiada para el navegador para asegurar que toda la funcionalidad esperada se emule con éxito. También proporciona una interfaz agradable para enlazar a ciertos estados.

Otro proyecto digno de destacar también es jQuery Ajaxy que es más o menos una extensión para jQuery History para agregar ajax a la mezcla. Como cuando comienzas a usar ajax con hashes, obtienes bastante complicado!


1
2018-02-25 02:40