Nota: apenas traduzi o texto abaixo e postei aqui.
Você pode usar a propriedade window.location.href
para atualizar a URL do navegador.
window.location.href = 'http://minha-nova-url.com';
Mas usar essa abordagem faz com que a página seja recarregada. E se você quiser atualizar a URL sem atualizar a página?
Hoje, vamos dar uma olhada na History API
.
A History API
A API History é um conjunto de métodos no history object
que pode ser usado para manipular o histórico — aquilo que é acessado pelos botões de avançar e retroceder — do navegador.
Funciona em todos os navegadores modernos e até no IE 10.
O método history.pushState()
O método history.pushState()
pode ser usado para inserir uma nova entrada no histórico do navegador — e, como resultado, atualizar a URL exibida — sem atualizar a página.
Ele aceita três argumentos:
-
state
, um object com alguns detalhes abre a URL ouentry
no histórico do navegador. -
title
, que deveria ser o que a propriedadedocument.title
deveria ser (mais sobre isso em breve). -
url
, a URL para adicionar ao histórico do navegador.
Um exemplo
Este método é útil principalmente com app de página única, onde você carrega conteúdo com JavaScript, mas deseja atualizar a URL para corresponder.
Por exemplo, digamos que você estava na homepage
e deseja alterar a URL para refletir a página "about". Você pode fazer algo assim:
history.pushState({ pageID: 'about' }, 'Sobre', '/about');
Se desejar, você pode ir para a homepage
do meu site, copiar/colar na console tab
nas developer tools
e executar isso.
Algumas pegadinhas
Como muitos métodos JavaScript, o método history.pushState()
tem algumas pegadinhas.
Alguns navegadores impõem um limite de 640.000 caracteres no state object
. Se você precisar passar dados de uma "view" para outra, e esses dados forem grandes, em vez disso, você deve usar um object vazio aqui e salvar esses dados com localStorage ou sessionStorage.
O atributo title
é obrigatório, mas ignorado por todos os navegadores. Provavelmente nem deveria existir, mas foi originalmente fornecido com a API e não pode ser removido sem quebrar os sites que o utilizam.
Com base nessas duas coisas, o argumento mais importante, url
, provavelmente deveria ser o primeiro, já que é o único que você realmente precisa para fazer o que deseja. Mas por alguma razão, é o último.
Independentemente disso, o método history.pushState()
é incrivelmente útil para determinadas situações.
Outras coisas que você pode fazer com a History API
O popstate event
Se você usar history.pushState()
para atualizar a URL, quando o usuário clicar nos botões de avançar ou retroceder, a URL mudará, mas a IU não.
Você pode usar o método popstate
para detectar essas alterações de URL e fazer alterações na interface do usuário conforme necessário.
window.addEventListener('popstate', function (event) {
// A URL mudou...
});
Antes aprendemos que a primeira propriedade passada para o método history.pushState()
é state
. Você pode acessar essa propriedade no event object
.
window.addEventListener('popstate', function (event) {
// Loga os dados de state no console
console.log(event.state);
});
Avançando e retrocedendo no History
Você também pode avançar e retroceder no histórico do navegador com alguns outros métodos na History API.
O método history.back()
volta uma página e o método history.forward()
avança uma página.
Você pode avançar ou retroceder mais de uma página usando o método history.go()
. Passe o número de páginas para pular. Use um número positivo para avançar e um número negativo para retroceder.
// volta 2 páginas
history.go(-2);
// avança 3 páginas
history.go(3);
Compatibilidade de navegadores
O popstate event
e os métodos back()
, forward()
e go()
funcionam em todos os navegadores modernos e até o IE 10.
Fonte
Newsletter de Go Make Things
Top comments (0)