Poignée URL d'ancrage événement de changement en js

Comment puis-je écrire le code JavaScript de rappel du code qui sera exécuté sur tous les changements dans l'URL d'ancrage?

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

InformationsquelleAutor Bogdan Gusiev | 2010-01-29
  1. 123

    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 l'appui de la 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/.

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

    • pour être complet, ajouter var storedHash = window.location.hash; à la mise-à-ensemble bloc de résumé. Btw: c'est aujourd'Hui appelé polyfill je pense.
    • Aujourd'hui, vous pouvez écouter de la hashChange sur window stackoverflow.com/questions/6390341/how-to-detect-url-change
    • vous... n'avez pas lu ma réponse, avez-vous? 😛
    • J'ai lu la réponse, j'ai raté la petite note, et je n'ai jamais vu des événements qui ressemblent à des hashChanged(storedHash);
    • dans ce cas, est destiné à être mis en œuvre par un développeur à l'aide de ce code. Ici, la réponse démontre simplement la façon dont on peut suivre la valeur de hachage pour les changements où la onhashchange événement n'est pas disponible, et combine l'événementiel et de la minuterie approches de fournir une solution universelle. Mon point est que la réponse que vous avez lié à ajoute absolument rien à la réponse ici ;-). Ils fournissent les mêmes informations de base, de même le lien vers Ben Alman du plugin jQuery. La seule différence est que j'ai fourni un pur JS solution dans ma réponse.
    • ok, n'était pas au courant de l'obligation de mettre en œuvre cette fonction, merci pour la clarification
    • J'ai été la recherche de quelques légers JS routeur, mais cela ne se fera très bien l'affaire. Aussi éliminé toutes les dépendances 🙂

    InformationsquelleAutor Andy E
  2. 3

    setInterval() est la seule solution universelle pour l'instant. Mais il y a un peu de lumière dans l'avenir en forme de hashchange événement

    InformationsquelleAutor NilColor
  3. 2

    De ce que je vois chez d'autres questions, la seule viable de la croix-navigateur solution est une minuterie. Découvrez cette question par exemple.

    InformationsquelleAutor Pekka 웃
  4. 1

    (Juste pour l'enregistrement.) Le YUI3 "hashchange" synthétique événement fait plus ou moins la même chose que l'on a accepté de répondre à

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

    Vous pouvez obtenir plus d'information de ce

    La Mutation des types d'événements

    La mutation de l'événement module est conçu
    pour permettre la notification de tout changement
    la structure d'un document,
    y compris attr et modifications de texte.

    • C'est au sujet de DOM changements.
    InformationsquelleAutor rahul
  6. 0

    Je vous conseille d'utiliser addEventListener au lieu de l'écraser window.onhashchange, sinon vous allez bloquer le cas pour d'autres plugins.

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

    À la recherche à l'échelle mondiale l'utilisation du navigateur aujourd'hui, une solution de repli n'est plus nécessaire.

    InformationsquelleAutor Fabian von Ellerts