usar - scrolltop javascript ejemplos

Manejar evento de cambio de anclaje de URL en js

Question

¿Cómo puedo escribir el código de devolución de llamada de JavaScript que se ejecutará en cualquier cambio en el ancla de URL?

Por ejemplo, de http: //example.com#a a http: //example.com#b

Answer 1

(Solo para el registro). El evento sintético YUI3 "hashchange" hace más o menos lo mismo que la respuesta aceptada

YUI().use(''history-hash'', function (Y) {
Y.on(''hashchange'', function (e) {
// Handle hashchange events on the current window.
}, Y.config.win);
});

Answer 2

Los motores de búsqueda personalizados de Google usan un temporizador para verificar el valor hash con respecto a un valor anterior, mientras que el marco flotante del niño en un dominio separado actualiza el valor hash de ubicación del padre para contener el tamaño del cuerpo del documento iframe. Cuando el temporizador capta el cambio, el padre puede cambiar el tamaño del iframe para que coincida con el del cuerpo de modo que no se muestren las barras de desplazamiento.

Algo como lo siguiente logra lo mismo:

var storedHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != storedHash) {
storedHash = window.location.hash;
hashChanged(storedHash);
}
}, 100); // Google uses 100ms intervals I think, might be lower

Google Chrome 5, Safari 5, Opera 10.60 , Firefox 3.6 e Internet Explorer 8 son compatibles con el evento hashchange :

if ("onhashchange" in window) // does the browser support the hashchange event?
window.onhashchange = function () {
hashChanged(window.location.hash);
}

y uniéndolo:

if ("onhashchange" in window) { // event supported?
window.onhashchange = function () {
hashChanged(window.location.hash);
}
}
else { // event not supported:
var storedHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != storedHash) {
storedHash = window.location.hash;
hashChanged(storedHash);
}
}, 100);
}

jQuery también tiene un complemento que verificará el evento hashchange y lo proporcionará si es necesario - http://benalman.com/projects/jquery-hashchange-plugin/ .

EDITAR : compatibilidad actualizada con el navegador (nuevamente).

Answer 3

Por lo que veo en otras preguntas de SO, la única solución viable para navegadores cruzados es un temporizador. Mira esta pregunta, por ejemplo.

Answer 4

Puedes obtener más información de esto

Tipos de eventos de mutación

El módulo de evento de mutación está diseñado para permitir la notificación de cualquier cambio en la estructura de un documento, incluidas las modificaciones de texto y de texto.

Answer 5

setInterval() es solo una solución universal por ahora. Pero hay algo de luz en el futuro en forma de evento hashchange