Comment puis-je détecter une barre d'adresse changement avec le JavaScript?

J'ai un Ajax lourds application qui peut avoir une URL telle que

http://example.com/myApp/#page=1

Lorsqu'un utilisateur manipule le site, la barre d'adresse peut changer pour quelque chose comme

http://example.com/myApp/#page=5

sans recharger la page.

Mon problème est le suivant de la séquence:

  1. Un utilisateur signets de la première URL.
  2. L'utilisateur manipule l'application de telle sorte que la deuxième URL est l'état actuel.
  3. L'utilisateur clique sur le signet créé à l'étape 1.
  4. L'URL dans la barre d'adresse changements de http://example.com/myApp/#page=5 à http://example.com/myApp/#page=1, mais je ne sais pas de manière à détecter le changement qui s'est passé.

Si je détecte un changement de certaines JavaScript serait agir sur elle.

  • Je suis curieux, pourquoi l'application conçue de cette façon? Je ne vois aucun besoin réel pour le changement d'URL.
  • Il fonctionne comme une chaîne de requête, mais ne cause pas le navigateur à recharger la page. C'est qui a été fait, de sorte que la charge du client n'a pas à être récupéré et chargé à chaque fois qu'une page est modifiée. La charge utile n'est pas facilement mis en cache, nécessite JavaScript temps d'initialisation, et ne serait pas fournir au client un sans heurt de l'expérience.
InformationsquelleAutor JoshNaro | 2009-12-18
  1. 36

    HTML5 introduit un hashchange événement qui vous permet de vous inscrire pour les notifications de l'url de hachage modifications sans interrogation pour eux avec une minuterie.

    Il pris en charge par tous les principaux navigateurs (Firefox 3.6, IE8, Chrome, d'autres basé sur Webkit navigateurs), mais je serais encore vous suggère fortement d'utiliser une bibliothèque qui gère l'événement pour vous - c'est à dire en utilisant un timer dans les navigateurs ne supportant pas le HTML5 événement et en utilisant le cas contraire.

    Pour de plus amples informations sur l'événement, consultez https://developer.mozilla.org/en/dom/window.onhashchange et http://msdn.microsoft.com/en-us/library/cc288209%28VS.85%29.aspx.

    • Maintenant, si seulement ceux IE6/7, les utilisateurs seraient tous de mise à niveau >=IE8. Merci pour la mise à jour.
    • Merci. Cette réponse est meilleure que la accepté de répondre.
    • J'ai commencé à utiliser le jqouery plugin de la hashChange événement - tout se passe bien 😀
    InformationsquelleAutor ThiefMaster
  2. 18

    vérifier l'adresse actuelle périodiquement à l'aide de setTimeout/intervalle:

     var oldLocation = location.href;
 setInterval(function() {
      if(location.href != oldLocation) {
           //do your action
           oldLocation = location.href
      }
  }, 1000); //check every second
    • Cette réponse est correcte. Vous devriez également envisager d'utiliser quelque chose comme le YUI Histoire du gestionnaire des composants, ce qui le fait pour vous, dans une manière de croix-navigateur.
    • Si je entrer une nouvelle adresse et appuyez sur Entrée il n'y a aucun moyen de la page en cours sera en mesure d'empêcher.
    • Ouais, j'espérais qu'il y a un événement masqué ou quelque chose. À l'aide d'un intervalle de ne semble tout simplement pas "droit" pour moi en quelque sorte. Merci.
    • Est ce court intervalle de temps bon pour l'application? C'est, n'est-ce pas garder le navigateur trop occupé à l'exécution de la fonction?
    • C'est moche, mais apparemment la seule manière: stackoverflow.com/questions/3522090/...
    • votre code est la syntaxe de mal. Veuillez le mettre à jour. (faites de votre action).
    • Quelqu'un peut-il m'expliquer comment cela pourrait-il fonctionner? Quand je change l'adresse dans la barre d'adresse, le navigateur récupère une nouvelle page, et l'ancienne page est détruit, de sorte que cette fonction n'est jamais une chance de s'exécuter.

    InformationsquelleAutor user187291
  3. 6

    Vous devez étendre l'emplacement de l'objet à exposer un événement que vous pouvez lier à.

    ie:

    window.location.prototype.changed = function(e){};

(function() //create a scope so 'location' is not global
{
    var location = window.location.href;
    setInterval(function()
    {
        if(location != window.location.href)
        {
            location = window.location.href;
            window.location.changed(location);
        }
    }, 1000);
})();

window.location.changed = function(e)
{
    console.log(e);//outputs http://newhref.com
    //this is fired when the window changes location
}
    • Ai-je besoin de jquery pour que cela fonctionne?
    • En réalité, car il utilise une minuterie, il n'a pas vraiment d'apporter une quelconque amélioration wrt ce que la solution choisie n'
    • Ce n'est pas la meilleure idée pour étendre un objet global qui expose déjà une valeur que vous pouvez regarder.
    InformationsquelleAutor Skawful
  4. 0

    SWFaddress est une excellente bibliothèque pour ces types de choses.

    InformationsquelleAutor moritzstefaner