Como posso detectar uma mudança de barra de endereço com JavaScript?

Question

Eu tenho um aplicativo pesado de Ajax que pode ter um URL como

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

Quando um usuário manipula o site, a barra de endereços pode mudar para algo como

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

sem recarregar a página.

Meu problema é a seguinte sequência:

1. Um usuário favorito é o primeiro URL.
2. O usuário manipula o aplicativo de modo que o segundo URL seja o estado atual.
3. O usuário clica no marcador criado na etapa 1.
4. O URL na barra de endereço muda de http://example.com/myapp/#page=5 para http://example.com/myapp/#page=1, mas não conheço uma maneira de detectar a mudança.

Se eu detectar uma alteração, algum JavaScript agiria sobre isso.

Answer 1

HTML5 apresenta a hashchange Evento que permite que você se registre para notificações de alterações de hash de URL sem a pesquisa para eles com um cronômetro.

É apoiado por todos os principais navegadores (Firefox 3.6, IE8, Chrome, outros navegadores baseados em Webkit), mas eu ainda sugiro usar uma biblioteca que lida com o evento para você - ou seja, usando um cronômetro nos navegadores que não apoia o que está apoiando o Evento HTML5 e usando o evento de outra forma.

Para mais informações sobre o evento, consulte https://developer.mozilla.org/en/dom/window.onhashchange e http://msdn.microsoft.com/en-us/library/cc288209%28vs.85%29.aspx.

Answer 2

Verifique o endereço atual periodicamente usando o setTimeout/intervalo:

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

Answer 3

Você deve estender o objeto de localização para expor um evento ao qual possa se vincular.

ou seja:

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 é uma excelente biblioteca para esses tipos de coisas.