Question Sur - window.location.hash - Changer?


J'utilise Ajax et le hachage pour la navigation.

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

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

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

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

Cela se voit à l'intérieur de la boîte d'adresse, mais je ne peux pas l'attraper avec JavaScript.


524
2018-03-25 09:10


origine


Réponses:


La seule façon de vraiment le faire (et c'est ce que fait vraiment l'historique'simplehistory '), est de définir un intervalle qui vérifie le hachage actuel et de le comparer à ce qu'il était auparavant, nous le faisons et laissons les abonnés s'abonner à un changement événement que nous tirons si le hachage change .. ce n'est pas parfait mais les navigateurs ne supportent vraiment pas cet événement en mode natif.


Mise à jour pour garder cette réponse fraîche:

Si vous utilisez jQuery (ce qui devrait être un peu fondamental pour la plupart), alors une bonne solution consiste à utiliser l'abstraction que jQuery vous donne en utilisant son système d'événements pour écouter les événements hashchange sur l'objet window.

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

La bonne chose ici est que vous pouvez écrire du code qui n'a même pas besoin de s'inquiéter de la prise en charge de hashchange, mais vous devez faire un peu de magie, sous la forme d'une fonction jQuery un peu moins connue jQuery événements spéciaux.

Avec cette fonctionnalité, vous pouvez essentiellement exécuter du code de configuration pour n'importe quel événement, la première fois que quelqu'un tente d'utiliser l'événement de quelque manière que ce soit (comme une liaison à l'événement).

Dans ce code de configuration, vous pouvez vérifier la prise en charge du navigateur natif et si le navigateur ne l'implémente pas nativement, vous pouvez configurer un seul temporisateur pour interroger les modifications et déclencher l'événement jQuery.

Cela dissocie 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 version de travail simple à 98%), mais pourquoi quand quelqu'un d'autre a déjà.


595
2018-03-25 10:33



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

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

270
2018-06-28 15:42



Notez que dans le cas d'Internet Explorer 7 et Internet Explorer 9, le if statment donnera vrai (pour "onhashchange" dans Windows), mais le window.onhashchange ne se déclenche jamais, il est donc préférable de stocker le hachage et de le vérifier toutes les 100 millisecondes, qu'il soit 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);
    }

MODIFIER - Depuis jQuery 1.9, $.browser.msie n'est pas supporté. La source: http://api.jquery.com/jquery.browser/


50
2017-10-30 00:19



Il y a beaucoup de trucs pour gérer History et window.location.hash dans les navigateurs IE:

  • Comme l'indique la question originale, si vous passez de la page a.html # b à a.html # c, puis cliquez sur le bouton de retour, le navigateur ne sait pas que la page a changé. Permettez-moi de le dire avec un exemple: window.location.href sera 'a.html # c', peu importe si vous êtes dans a.html # b ou a.html # c.

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

  • Cependant, si vous mettez un iframe à l'intérieur d'une page, naviguez de a.html # b vers a.html # c dans ce iframe, puis cliquez sur le bouton back, iframe.contentWindow.document.location.href change comme prévu.

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

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


13
2018-06-24 17:29



Firefox a eu un événement onhashchange depuis 3.6. Voir window.onhashchange.


12
2017-10-19 17:46



Ben Alman a un super plugin jQuery pour gérer ça: http://benalman.com/projects/jquery-hashchange-plugin/

Si vous n'utilisez pas jQuery, cela peut être une référence intéressante pour disséquer.


11
2017-10-29 09:04



Vous pouvez facilement implémenter un observateur (la méthode "watch") sur la propriété "hash" de l'objet "window.location".

Firefox a son propre mise en œuvre pour observer les changements d'objet, mais si vous utilisez une autre implémentation (telle que Surveillez les modifications des propriétés de l'objet en JavaScript) - pour les autres navigateurs, cela fera l'affaire.

Le code ressemblera à ceci:

window.location.watch(
    'hash',
    function(id,oldVal,newVal){
        console.log("the window's hash value has changed from "+oldval+" to "+newVal);
    }
);

Ensuite, vous pouvez le tester:

var myHashLink = "home";
window.location = window.location + "#" + myHashLink;

Et bien sûr, cela déclenchera votre fonction d'observateur.


9
2018-03-25 09:31



Une mise en œuvre décente peut être trouvée à http://code.google.com/p/reallysimplehistory/. Le seul et unique problème (mais aussi) qu'il rencontre est: dans Internet Explorer, la modification manuelle du hachage de l'emplacement réinitialisera toute la pile de l'historique (il s'agit d'un problème de navigateur qui ne peut être résolu).

Notez qu'Internet Explorer 8 prend en charge l'événement "hashchange" et, comme il fait partie de HTML5, vous pouvez vous attendre à ce que d'autres navigateurs se rattrapent.


6
2017-12-07 14:36



Je l'utilisais dans une application de réaction pour que l'URL affiche différents paramètres en fonction de la vue de l'utilisateur.

J'ai regardé le paramètre de hachage en utilisant

window.addEventListener('hashchange', doSomethingWithChangeFunction());

alors

doSomethingWithChangeFunction () { 
    // Get new hash value
    let urlParam = window.location.hash;
    // Do something with new hash value
};

Travaillé un régal, fonctionne avec les boutons du navigateur avant et arrière et aussi dans l'historique du navigateur.


2
2017-08-28 17:00