DEV Community

Cover image for Como atualizar a URL do navegador sem refresh a página usando a vanilla JS History API
doug-source
doug-source

Posted on

Como atualizar a URL do navegador sem refresh a página usando a vanilla JS History API

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';
Enter fullscreen mode Exit fullscreen mode

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 ou entry no histórico do navegador.
  • title, que deveria ser o que a propriedade document.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');
Enter fullscreen mode Exit fullscreen mode

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...
});
Enter fullscreen mode Exit fullscreen mode

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);
});
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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

Image of Bright Data

Maximize Data Efficiency – Store and process vast amounts efficiently.

Optimize your infrastructure with our solutions designed for high-volume data processing and storage.

Optimize Now

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay