Como modificar o URL em JavaScript sem recarregar a página

Alterar o URL sem recarregar a página pode ser uma estratégia muito útil para criar sites mais emocionantes e dinâmicos usando JavaScript. Por exemplo, criar um site de uma página em que o usuário interage com diferentes partes/seções do site sem navegar/redirecionar para uma nova página é um caso de uso comum para alterar o URL sem recarregar a página. Isso pode resultar em uma experiência mais consistente e responsiva do usuário.

Este artigo descreverá os métodos para modificar o URL sem recarregar a página da web usando JavaScript.

Como modificar/alterar o URL em JavaScript sem recarregar a página?

Para modificar o URL sem recarregar a página da web, use o seguinte método predefinido JavaScript:

• método pushState ()
• Método replacestate ()

Método 1: Modifique o URL em JavaScript sem recarregar a página usando o método “pushState ()”

Para modificar o URL sem recarregar a página da web, use o “pushState ()”Método. É um recurso ou o método predefinido do “objeto de história”Isso permite alterar o histórico do navegador sem navegar ou atualizar a página. Apenas adiciona ou modifica a pilha de histórico e não carrega uma nova página. Ao usar essa abordagem, você pode alternar entre as páginas adicionando uma nova entrada à pilha de histórico do navegador.

Sintaxe
Siga a sintaxe dada para o método “pushState ()”:

janela.história.pushState (estado, título, URL);

Aqui:

• ““estado”Representa a nova entrada de histórico.
• ““título”É o texto específico que pode ser mostrado na barra de título do navegador.
• ““url”Indica o URL substituído como uma nova entrada.

Exemplo
Em um arquivo html, crie quatro botões que chamam o “modifyurl ()”Função no botão Clique:

1
2
3
4

Defina uma função “modifyurl ()”Em um arquivo JavaScript que acionará o botão Clique. São necessários dois parâmetros, o “título" e a "url”. Quando o método é chamado no botão Clique, o "título" e o "URL" serão passados ​​como argumentos. Verifique o tipo de “pushState"Do objeto de história, se não for"indefinido”. Então, chame o “história.pushState ()”Método para alterar o URL:

função modifyurl (title, url)
if (typeof (história.pushstate) != "indefinido")
var obj =
Título: Título,
URL: URL
;
história.pushState (obj, obj.Título, obj.Url);

Pode -se observar que em cada botão clicar, o URL será alterado com sucesso sem recarregar a página:

Na saída acima, você pode ver que o botão de seta traseira no canto superior esquerdo (<-) está ativado ao clicar no botão, indica que você pode navegar para frente e para trás porque o “pushState ()”O método adiciona o novo URL na pilha de história.

Método 2: Modifique o URL em JavaScript sem recarregar a página usando o método "replacestate ()"

Use o "replacestate ()”Método para modificar o URL sem recarregar a página da web. É também uma característica do “objeto de história”Mas não adicionará uma nova entrada à pilha de histórico. Ele muda o estado existente da história do navegador e a substitui por um novo estado. Ao usar essa abordagem, você não pode alternar entre as páginas.

Sintaxe
A sintaxe dada é utilizada para o método "replacestate ()":

janela.história.replacestate (estado, título, URL);

Exemplo
Na função definida, chame o “replacestate ()”Método para substituir o URL no botão Clique sem recarregar ou navegar na página:

função modifyurl (title, url)
if (typeof (história.replacestar) != "indefinido")
var obj =
Título: Título,
URL: URL
;
história.substitua (obj, obj, obj.Título, obj.Url);

A saída indica que, no clique de cada botão, o URL foi alterado e não há opção de navegar para voltar à medida que o botão de seta traseira está desativada:

Fornecemos todas as informações essenciais relevantes para a modificação do URL sem recarregar a página em JavaScript.

Conclusão

Para modificar/alterar o URL sem atualizar a página da web, use o “pushState ()”Método ou o“replacestate ()”Método. O método “pushState ()” adiciona o novo URL como uma nova entrada em uma pilha de histórico e permite que os usuários naveguem para frente e para trás. Enquanto o método "replacestate ()" substitui o URL e não permite mudar para a página traseira. Este artigo descreveu os métodos para modificar o URL sem recarregar a página da web usando JavaScript.