Gérer l'événement de changement d'ancre d'URL dans js

Comment puis-je écrire le code de rappel JavaScript qui sera exécuté sur toute modification de l'ancre d'URL?

Par exemple de http://example.com#aàhttp://example.com#b

Les moteurs de recherche personnalisés Google utilisent un minuteur pour vérifier le hachage par rapport à une valeur précédente, tandis que l'iframe enfant sur un domaine séparé met à jour le hachage de l'emplacement du parent pour qu'il contienne la taille du corps du document iframe. Lorsque le minuteur détecte le changement, le parent peut redimensionner l'iframe pour qu'il corresponde à celui du corps afin que les barres de défilement ne soient pas affichées.

Quelque chose comme ce qui suit permet d'obtenir la même chose:

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 et Internet Explorer 8 prennent tous en charge l' hashchangeévénement:

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

et le mettre ensemble:

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 a également un plugin qui vérifiera l'événement hashchange et fournira le sien si nécessaire - http://benalman.com/projects/jquery-hashchange-plugin/ .

EDIT : Prise en charge du navigateur mise à jour (à nouveau).

Je recommanderais d'utiliser addEventListenerau lieu d'écraser window.onhashchange, sinon vous bloquerez l'événement pour d'autres plugins.

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

En regardant l'utilisation mondiale du navigateur aujourd'hui, une solution de secours n'est plus nécessaire.

setInterval()n'est pour l'instant qu'une solution universelle. Mais il y a un peu de lumière dans le futur sous forme d' événement de changement de hachage

D'après ce que je vois dans d'autres questions SO, la seule solution inter-navigateurs viable est une minuterie. Consultez cette question par exemple.

(Juste pour mémoire.) L'événement synthétique "hashchange" YUI3 fait plus ou moins la même chose que la réponse acceptée

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

Vous pouvez obtenir plus d'informations à partir de ce

Types d'événements de mutation

Le module d'événement de mutation est conçu pour permettre la notification de toute modification de la structure d'un document, y compris les modifications d'attr et de texte.