Como posso detectar uma mudança de barra de endereço com JavaScript?
-
20-09-2019 - |
Pergunta
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:
- Um usuário favorito é o primeiro URL.
- O usuário manipula o aplicativo de modo que o segundo URL seja o estado atual.
- O usuário clica no marcador criado na etapa 1.
- 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.
Solução
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.
Outras dicas
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
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
}
Swfaddress é uma excelente biblioteca para esses tipos de coisas.