javascript - snapseed - En-window.location.hash-¿Cambiar?

mejor aplicacion para editar fotos android

Question

Estoy usando Ajax y hash para la navegación.

¿Hay alguna manera de verificar si el window.location.hash cambió de esta manera?

http://example.com/blah # 123 a http://example.com/blah # 456

Funciona si lo compruebo cuando se carga el documento.

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

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

Answer 1

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

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

Answer 2

Estaba usando esto en una aplicación de reacción para hacer que la URL mostrara diferentes parámetros dependiendo de la vista en la que estaba 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
};

Trabajó un tratamiento, funciona con los botones de navegación hacia adelante y hacia atrás y también en el historial del navegador

Answer 3

Firefox ha tenido un evento onhashchange desde 3.6. Ver developer.mozilla.org/en/DOM/window.onhashchange .

Answer 4

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

• Internet Explorer 8
• Firefox 3.6
• Cromo 5
• Safari 5
• Ópera 10.6

Answer 5

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

• Como dijo 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ítame decirlo con un ejemplo: window.location.href será ''a.html # c'', sin importar si está 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 ''<a name="#b">'' y ''<a name="#c">'' existen anteriormente en la página.

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

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

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

Answer 6

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

path.js NPM

path.js GitHub

Answer 7

La única manera de hacer esto realmente (y es cómo lo hace la "historia realmente simple"), es establecer un intervalo que mantenga el hash actual y compararlo con lo que era antes, lo hacemos y dejamos 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.

Actualizar para mantener esta respuesta fresca:

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

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

Lo bueno aquí es que puedes escribir código que no necesite preocuparse por el soporte de hashchange, sin embargo, SÍ necesitas hacer algo de magia, en forma de eventos jQuery especiales algo menos conocidos de jQuery.

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

En este código de configuración, puede verificar la compatibilidad nativa del navegador y si el navegador no implementa esto de forma nativa, puede configurar un solo temporizador para sondear los cambios y desencadenar 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 de trabajo simple del 98%), pero ¿por qué hacerlo cuando alguien más ya lo hizo ?

Answer 8

Otra gran implementación es jQuery History, que utilizará el evento nativo onhashchange si el navegador lo admite; si no, utilizará un iframe o un intervalo apropiado para el navegador para garantizar que se emula con éxito toda la funcionalidad esperada. También proporciona una interfaz agradable para enlazar a ciertos estados.

Otro proyecto que vale la pena destacar también es jQuery Ajaxy, que es prácticamente una extensión para jQuery History para agregar ajax a la mezcla. ¡Como cuando empiezas a usar ajax con hashes, es bastante complicado !

Answer 9

Puede implementar fácilmente un observador (el método de "observación") en la propiedad "hash" del objeto "window.location".

Firefox tiene su propia implementación para ver cambios de objetos , pero si usa alguna otra implementación (como Mirar los cambios de propiedades de 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.

Answer 10

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

Answer 11

Tenga en cuenta que, en el caso de Internet Explorer 7 e Internet Explorer 9, la declaración de if será verdadera (para "onhashchange" en windows), pero window.onhashchange nunca se activará, por lo que es mejor almacenar hash y verificarlo 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/

Answer 12

HUtil un plugin de jQuery, HUtil , y escribí una interfaz tipo YUI History encima de él.

Échale un vistazo una vez. Si necesitas ayuda puedo ayudarte.

Answer 13

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 presionas los botones de retroceder o avanzar, la página se volverá a cargar según el nuevo valor de hash.