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

88

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

— Bogdan Gusiev
source

126

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).

— Andy E
source

pour être complet, ajoutez var storedHash = window.location.hash;au bloc récapitulatif de mise en place. Btw: De nos jours, cela s'appelle polyfill je pense.

— Frank Nocke

1

De nos jours, vous pouvez écouter le hashChangesur window stackoverflow.com/questions/6390341/how-to-detect-url-change

— Timo Huovinen

@AndyE J'ai lu la réponse, j'ai raté la petite note et je n'ai jamais vu d'événements qui ressemblent àhashChanged(storedHash);

— Timo Huovinen

1

@TimoHuovinen:, hashChangeddans ce cas, est destiné à être une fonction implémentée par un développeur utilisant ce code. La réponse ici montre simplement comment on peut surveiller le hachage pour les changements lorsque l' onhashchangeévénement n'est pas disponible, et combine les approches basées sur les événements et basées sur la minuterie pour fournir une solution universelle. Mon point est que la réponse à laquelle vous avez lié n'ajoute absolument rien à la réponse ici ;-). Ils fournissent les mêmes informations de base, même le lien vers le plugin jQuery de Ben Alman. La seule différence est que j'ai fourni une solution JS pure dans ma réponse.

— Andy E

1

Je cherchais un routeur JS léger, mais cela a bien fait le travail. Également éliminé toutes les dépendances :)

— gskema

4

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.

— Fabian von Ellerts
source

3

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

— NilColor
source

FYI: documentation deonhashchange l'événement sur Mozilla Developer Network

2

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.

— Pekka
source

1

(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);
});

— mjhm
source

0

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.

— rahul
source

Il s'agit des changements DOM.

— Raj