web-dev-qa-db-fra.com

Comment détecter un changement de barre d'adresse avec JavaScript?

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 pour quelque chose comme

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

sans recharger la page.

Mon problème est la séquence suivante:

  1. Un utilisateur marque la première URL.
  2. L'utilisateur manipule l'application de sorte que la deuxième URL correspond à l'état actuel.
  3. L'utilisateur clique sur le signet créé à l'étape 1.
  4. L’URL dans la barre d’adresse change de http://example.com/myApp/#page=5 en http://example.com/myApp/#page=1 , mais je ne Je ne sais pas comment détecter le changement.

Si je détecte un changement, un JavaScript agira en conséquence.

javascriptjavascript-eventsaddress-bar
27
JoshNaro

HTML5 introduit un événement hashchange qui vous permet de vous inscrire aux notifications de changements de hachage de l’URL sans les interroger à l’aide d’une minuterie.

Il est supporté par tous les principaux navigateurs (Firefox 3.6, IE8, Chrome, autres navigateurs Webkit), mais je suggérerais néanmoins fortement d’utiliser une bibliothèque qui gère l’événement pour vous - c’est-à-dire en utilisant une minuterie dans les navigateurs ne prenant pas en charge la Événement HTML5 et utiliser l'événement autrement.

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

35
ThiefMaster

vérifiez régulièrement l'adresse actuelle à l'aide de setTimeout/interval:

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

Vous devez étendre l'objet location pour exposer un événement auquel vous pouvez vous lier.

c'est à 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
}
5
Skawful

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

0
moritzstefaner