JavaScript

Atualizar barra de endereço com nova URL sem recarregar página

25 de setembro de 2021

Atualizar barra de endereço com nova URL sem recarregar página

Neste artigo você vai aprender a atualizar barra de endereço com nova URL, sem recarregar e utilizando JavaScript

Atualizar barra de endereço com nova URL capa

Fala programador(a), beleza? Bora aprender mais sobre manipulação de URL e também JavaScript!

Vamos precisar aprender alguns recursos, que não são tão novos em JS para atingir nosso objetivo

Primeiramente vamos acessar o objeto global window, que está presente em toda as aplicações de JavaScript

Em window temos acesso a history, que possui método que trabalham com a URL

E o que utilizaremos será o pushState

O método pushState precisa de alguns argumentos:

  • state: texto ou objeto que está associado a nova URL estaremos adicionando;
  • title: um título para a nova página;
  • url: a nova URL que troca a atual, por exemplo, /produtos;

Com estes preenchidos o método vai fazer exatamente o que precisamos, mudar a URL atual para um nova, definida como parâmetro

Veja na prática a utilização de pushState:

window.history.pushState("Algum texto para o state", "Produtos", "/produtos");

Agora teremos uma mudança de URL para /produtos

Onde o title será Produtos, e o state será o que definirmos como primeiro argumento

Note que o title em alguns navegadores ainda é ignorado, então pode ser que ele não seja alterado como esperamos

Conclusão

Neste artigo você aprendeu a como atualizar barra de endereço com nova URL com JavaScript

Utilizamos a função pushState, onde podemos passar uma nova URL

Que é alterada baseada no argumento que enviamos para a função, podemos também passar outros parâmetros como: state e title

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x