Comment puis-je détecter les changements dans le hachage de l'emplacement ?

Question

J'utilise Ajax et hash pour la navigation.

Existe-t-il un moyen de vérifier si le window.location.hash a changé comme ça ?

http://example.com/blah #123 a http://example.com/blah #456

Cela fonctionne si je le vérifie lorsque le document se charge.

Mais si j'ai une navigation basée sur le #hash, cela ne fonctionne pas lorsque j'appuie sur le bouton retour du navigateur (je passe donc de blah#456 à blah#123).

Il apparaît dans la boîte d'adresse, mais je ne peux pas l'attraper avec JavaScript.

Answer 1

La seule façon de faire cela (et c'est ainsi que le "reallysimplehistory" le fait), est de définir un intervalle qui vérifie le hash actuel et le compare à ce qu'il était avant, nous faisons cela et laissons les abonnés s'abonner à un événement de changement que nous déclenchons si le hash change ce n'est pas parfait mais les navigateurs ne supportent pas vraiment cet événement de façon native.

---

Mettez à jour pour que cette réponse reste d'actualité :

Si vous utilisez jQuery (ce qui, aujourd'hui, devrait être quelque peu fondamental pour la plupart), une solution intéressante consiste à utiliser l'abstraction que jQuery vous offre en utilisant son système d'événements pour écouter les événements hashchange sur l'objet fenêtre.

$(window).on('hashchange', function() {
  //.. work ..
});

Ce qui est bien ici, c'est que vous pouvez écrire du code qui n'a même pas besoin de se préoccuper de la prise en charge des changements de hachage, mais vous devez faire un peu de magie, sous la forme d'une fonctionnalité jQuery quelque peu moins connue. Événements spéciaux jQuery .

Cette fonction permet essentiellement d'exécuter un code de configuration pour tout événement, la première fois que quelqu'un tente d'utiliser l'événement d'une manière ou d'une autre (comme une liaison avec l'événement).

Dans ce code de configuration, vous pouvez vérifier la prise en charge native du navigateur et, si le navigateur ne l'implémente pas, vous pouvez configurer une minuterie unique pour surveiller les changements et déclencher l'événement jQuery.

Cela libère complètement votre code de la nécessité de comprendre ce problème de support, l'implémentation d'un événement spécial de ce type est triviale (pour obtenir une simple version fonctionnant à 98%), mais pourquoi faire cela ? quand quelqu'un d'autre a déjà .

Answer 2

HTML5 spécifie un hashchange événement . Cet événement est maintenant supporté par tous les navigateurs modernes . Un support a été ajouté dans les versions de navigateurs suivantes :

• Internet Explorer 8
• Firefox 3.6
• Chrome 5
• Safari 5
• Opera 10.6

Answer 3

Notez que dans le cas d'Internet Explorer 7 et d'Internet Explorer 9, l'adresse de l'utilisateur est la suivante if donnera vrai (pour "onhashchange" dans Windows), mais l'instruction window.onhashchange ne se déclenchera jamais, il est donc préférable de stocker le hachage et de vérifier après chaque 100 millisecondes s'il a été modifié ou non pour toutes les versions d'Internet Explorer.

    if (("onhashchange" in window) && !($.browser.msie)) {
         window.onhashchange = function () {
              alert(window.location.hash);
         }
         // Or $(window).bind( 'hashchange',function(e) {
         //       alert(window.location.hash);
         //   });
    }
    else {
        var prevHash = window.location.hash;
        window.setInterval(function () {
           if (window.location.hash != prevHash) {
              prevHash = window.location.hash;
              alert(window.location.hash);
           }
        }, 100);
    }

EDIT - Depuis jQuery 1.9, $.browser.msie n'est pas pris en charge. Source : http://api.jquery.com/jquery.browser/

Answer 4

Il existe de nombreuses astuces pour gérer l'historique et window.location.hash dans les navigateurs IE :

• Comme le dit la question initiale, si vous passez de la page a.html#b à a.html#c, puis appuyez sur le bouton retour, le navigateur ne sait pas que la page a changé. Laissez-moi vous donner un exemple : window.location.href sera 'a.html#c', peu importe que vous soyez dans a.html#b ou a.html#c.

• En fait, a.html#b et a.html#c sont stockés dans l'historique sólo si les éléments '<a name="#b">' et '<a name="#c">' existent déjà dans la page.

• Cependant, si vous placez une iframe à l'intérieur d'une page, que vous naviguez de a.html#b à a.html#c dans cette iframe et que vous appuyez ensuite sur le bouton "retour", iframe.contentWindow.document.location.href change comme prévu.

• Si vous utilisez 'document.domain= quelque chose dans votre code, alors vous ne pouvez pas accéder à iframe.contentWindow.document.open()' (et beaucoup de gestionnaires d'historique font cela).

Je sais que ce n'est pas une vraie réponse, mais peut-être que les notes d'IE-History sont utiles à quelqu'un.

Answer 5

Firefox dispose d'un événement onhashchange depuis la version 3.6. Voir fenêtre.onhashchange .