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

Question

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

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

Answer 1

Google Moteurs de Recherche Personnalisés utilisez une minuterie pour vérifier le hash, contre une précédente valeur, tandis que l'enfant iframe sur un autre domaine, les mises à jour du parent emplacement de hachage pour contenir la taille de l'iframe corps du document. Lorsque la minuterie attrape le changement, le parent peut redimensionner l'iframe pour correspondre à celle du corps, de sorte que les barres de défilement ne sont pas affichés.

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

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 tous de soutenir l' hashchange événement:

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

et de les 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 dispose également d'un plugin qui permettra de vérifier la hashchange événement et fournir si nécessaire - http://benalman.com/projects/jquery-hashchange-plugin/.

EDIT: mise à Jour du navigateur (là encore).

Answer 2

D'après ce que je vois dans d'autres questions SO, la seule solution utilisable entre plusieurs navigateurs est un minuteur. Découvrez cette question par exemple.

Answer 3

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

Answer 4

(Juste pour l'enregistrement.) 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);
});
 

Answer 5

Ma solution (pour Struts2)