Sur la fenêtre.emplacement.hachage de Changement?

J'utilise Ajax et hash pour la navigation.

y a-t-il un moyen de vérifier si le window.location.hash a changé ainsi?

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

il fonctionne si je le vérifie quand le document charge.

mais si j'ai la navigation basée sur #hash ça ne marche pas quand J'appuie sur le bouton arrière 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.

527
demandé sur RPichioli 2009-03-25 12:10:18
la source

13 ответов

la seule façon de vraiment faire cela (et c'est ce que fait le 'reallysimplehistory'), est de définir un intervalle qui continue à vérifier le hash courant, et de le comparer à ce qu'il était auparavant, nous le faisons et laissons les abonnés s'abonner à un événement modifié que nous déclenchons si le hash change.. ce n'est pas parfait, mais les navigateurs vraiment ne prennent pas en charge cet événement nativement.


mise à Jour pour garder cette réponse douce:

si vous êtes en utilisant jQuery (qui aujourd'hui devrait être quelque peu fondamental pour la plupart) alors une bonne solution est d'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 vous soucier du support de hashchange, cependant vous devez faire un peu de magie, sous la forme d'une fonctionnalité de jQuery un peu moins connue jQuery special events .

avec cette fonctionnalité, vous pouvez essentiellement exécuter un code de configuration pour tout événement, la première fois que quelqu'un tente d'utiliser l'événement de quelque manière que ce soit (comme lier à 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 timer unique pour rechercher les modifications, et déclencher l'événement jQuery.

ceci dégrade complètement votre code du besoin de comprendre ce problème de soutien, la mise en œuvre d'un événement spécial de ce type est trivial (pour obtenir une version simple de travail à 98%), mais pourquoi faire que quand quelqu'un d'autre a déjà .

596
répondu meandmycode 2014-10-03 12:07:48
la source

HTML5 spécifie un hashchange événement . Cet événement est maintenant pris en charge par tous les navigateurs modernes . Le Support a été ajouté dans les versions suivantes du navigateur:

  • Internet Explorer 8
  • Firefox 3.6
  • Chrome 5
  • Safari 5
  • Opéra 10.6
274
répondu Miles 2012-06-15 23:31:35
la source

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 sera jamais le feu, il est donc préférable de stocker hash et de vérifier après chaque 100 milliseconde si elle a changé 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 supporté. Source: http://api.jquery.com/jquery.browser/

50
répondu Khan Salahuddin 2014-12-12 06:17:32
la source

il y a beaucoup de trucs à faire avec L'histoire et la fenêtre.emplacement.hash dans les navigateurs IE:

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

13
répondu Sergio Cinos 2009-10-30 03:19:09
la source

Firefox a eu un évènement onhashchange depuis 3.6. Voir fenêtre.onhashchange .

12
répondu edfuh 2011-08-06 21:03:55
la source

Ben Alman a un grand plugin jQuery pour faire face à cela: http://benalman.com/projects/jquery-hashchange-plugin/

si vous n'utilisez pas jQuery, il peut s'agir d'une référence intéressante à disséquer.

11
répondu CJ. 2010-10-19 21:46:29
la source

vous pouvez facilement implémenter un observateur (la méthode" watch") sur la propriété" hash "de la fenêtre"."emplacement de l'objet.

Firefox a son propre implémentation pour regarder les changements d'objet , mais si vous utilisez une autre implémentation (comme guetter les changements de propriétés d'objet dans JavaScript ) - pour les autres navigateurs, qui 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);
    }
);

alors vous pouvez le tester:

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

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

9
répondu gion_13 2017-05-23 14:47:20
la source

Un décent mise en œuvre peut être trouvé à la http://code.google.com/p/reallysimplehistory/ . Le seul (mais aussi) problème et le bug qu'il a est: dans Internet Explorer modifier le hachage d'emplacement réinitialisera manuellement la pile entière d'histoire (c'est un problème de navigateur et il ne peut pas être résolu).

Note, Internet Explorer 8 a la prise en charge de l'événement "hashchange", et depuis qu'il fait partie de HTML5, vous pouvez vous attendre à ce que d'autres navigateurs attrapent jusqu'.

6
répondu Sergey Ilinsky 2011-08-06 20:59:38
la source

j'utilisais ceci dans une application react pour faire afficher des paramètres différents selon la vue sur laquelle l'utilisateur était.

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

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

puis

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

a travaillé un treat, fonctionne avec des boutons de navigateur avant et arrière et aussi dans l'histoire du navigateur.

3
répondu Sprose 2017-12-07 17:36:04
la source

une autre grande implémentation est jQuery History qui utilisera l'événement onhashchange natif si elle est prise en charge par le navigateur, sinon il utilisera une iframe ou un intervalle approprié pour le navigateur pour s'assurer que toutes les fonctionnalités attendues sont émulées avec succès. Il offre également une interface agréable pour se lier à certains États.

un autre projet intéressant à noter est jQuery Ajaxy qui est à peu près un extension pour L'Histoire de jQuery pour ajouter ajax au mélange. Comme quand vous commencez à utiliser ajax avec des hachures, il obtient assez compliqué !

1
répondu balupton 2017-05-23 15:10:40
la source
var page_url = 'http://www.yoursite.com/'; // full path leading up to hash;
var current_url_w_hash = page_url + window.location.hash; // now you might have something like: http://www.yoursite.com/#123

function TrackHash() {
    if (document.location != page_url + current_url_w_hash) {
        window.location = document.location;
    }
    return false;
}
var RunTabs = setInterval(TrackHash, 200);

C'est ça... maintenant, à chaque fois que vous appuyez sur vos boutons back ou forward, la page se rechargera selon la nouvelle valeur de hachage.

1
répondu batman 2014-04-10 14:50:03
la source

j'ai utilisé path.js pour le routage côté client. Je l'ai trouvé assez succinct et léger (il a également été publié à la NPM aussi), et utilise la navigation basée sur le hash.

chemin d'accès.js NPM

chemin d'accès.js GitHub

1
répondu Tom 2015-01-03 01:23:11
la source

j'ai utilisé un plugin jQuery, HUtil , et a écrit un YUI histoire comme interface sur le dessus de celui-ci.

Vérifiez une fois. Si vous avez besoin d'aide je peux vous aider.

0
répondu moha297 2011-08-06 21:02:27
la source