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

Question

J'ai une application lourde Ajax 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 quelque chose comme

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

sans recharger la page.

Mon problème est la séquence suivante:

1. Un utilisateur signets la première URL.
2. L'utilisateur manipule l'application telle 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 passe de http://example.com/myApp/#page= 5 http://example.com/myApp/#page=1 , mais je ne sais pas d'un moyen de détecter le changement est arrivé.

Si je détecte un changement du code JavaScript serait agir.

Answer 1

HTML5 introduit un hashchange événement qui vous permet d'enregistrer des notifications de modifications de hachage URL sans interrogation pour eux avec une minuterie.

Il pris en charge par tous les principaux navigateurs (Firefox 3.6, IE8, Chrome, d'autres navigateurs basés sur Webkit), mais je voudrais encore vous suggère fortement d'utiliser une bibliothèque qui gère l'événement pour vous - dire en utilisant une minuterie dans les navigateurs ne pas soutenir l'événement HTML5 et en utilisant l'événement autrement.

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

Answer 2

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

 var oldLocation = location.href;
 setInterval(function() {
      if(location.href != oldLocation) {
           // do your action
           oldLocation = location.href
      }
  }, 1000); // check every second

Answer 3

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

-à-dire:

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
}

Answer 4

SWFAddress est une excellente bibliothèque pour ce genre de choses.