Gestisci l'evento di modifica dell'ancoraggio dell'URL in js

88

Come posso scrivere il codice di callback JavaScript che verrà eseguito su eventuali modifiche nell'ancoraggio dell'URL?

Ad esempio dal http://example.com#aalhttp://example.com#b

— Bogdan Gusiev
fonte

126

I motori di ricerca personalizzati di Google utilizzano un timer per controllare l'hash rispetto a un valore precedente, mentre l'iframe secondario su un dominio separato aggiorna l'hash della posizione del genitore per contenere la dimensione del corpo del documento iframe. Quando il timer rileva la modifica, il genitore può ridimensionare l'iframe in modo che corrisponda a quello del corpo in modo che le barre di scorrimento non vengano visualizzate.

Qualcosa come il seguente ottiene lo stesso:

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 supportano tutti l' hashchangeevento:

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

e metterlo insieme:

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 ha anche un plug-in che controllerà l'evento hashchange e fornirà il proprio se necessario - http://benalman.com/projects/jquery-hashchange-plugin/ .

EDIT : supporto browser aggiornato (di nuovo).

— Andy E
fonte

per completezza, aggiungere var storedHash = window.location.hash;al blocco di riepilogo di assemblaggio. Btw: Al giorno d'oggi questo si chiama polyfill credo.

— Frank Nocke

1

Al giorno d'oggi puoi ascoltare hashChangesu window stackoverflow.com/questions/6390341/how-to-detect-url-change

— Timo Huovinen

@ AndyE Ho letto la risposta, mi sono perso la piccola nota e non ho mai visto eventi che assomigliano ahashChanged(storedHash);

— Timo Huovinen

1

@TimoHuovinen:, hashChangedin questo caso, è intesa come una funzione implementata da uno sviluppatore che utilizza questo codice. La risposta qui dimostra solo come si può monitorare l'hash per i cambiamenti in cui l' onhashchangeevento non è disponibile e combina gli approcci basati su eventi e basati su timer per fornire una soluzione universale. Il punto è che la risposta che hai collegato non aggiunge assolutamente nulla alla risposta qui ;-). Forniscono le stesse informazioni di base, anche il collegamento al plugin jQuery di Ben Alman. L'unica differenza è che ho fornito una soluzione JS pura nella mia risposta.

— Andy E

1

Stavo cercando un router JS leggero, ma ha funzionato bene. Eliminate anche tutte le dipendenze :)

— gskema

4

Ti consiglio di usare addEventListenerinvece di sovrascrivere window.onhashchange, altrimenti bloccherai l'evento per altri plugin.

window.addEventListener('hashchange', function() {
...
})

Guardando l'utilizzo del browser globale oggi, non è più necessario un fallback.

— Fabian von Ellerts
fonte

3

setInterval()è l'unica soluzione universale per ora. Ma ci sono alcune luci in futuro sotto forma di eventi di cambiamento di hash

— NilColor
fonte

FYI: documentazioneonhashchange dell'evento presso Mozilla Developer Network

2

Da quello che vedo in altre domande SO, l'unica soluzione praticabile cross-browser è un timer. Dai un'occhiata a questa domanda per esempio.

— Pekka
fonte

1

(Solo per la cronaca.) L'evento sintetico YUI3 "hashchange" fa più o meno la stessa cosa della risposta accettata

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

— mjhm
fonte

0

Puoi ottenere maggiori informazioni da questo

Tipi di eventi di mutazione

Il modulo dell'evento di mutazione è progettato per consentire la notifica di eventuali modifiche alla struttura di un documento, incluse le modifiche all'attr e al testo.

— rahul
fonte

Si tratta di modifiche al DOM.

— Raj