Este artigo descreve os métodos para modificar a URL sem recarregar a página da Web usando JavaScript.
Como modificar/alterar a URL em JavaScript sem recarregar a página?
Para modificar a URL sem recarregar a página da web, use o seguinte método predefinido de JavaScript:
Método 1: Modifique a 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 botão “ pushState() ” método. É um recurso ou o método predefinido do “ Objeto histórico ” que permite alterar o histórico do navegador sem navegar ou atualizar a página. Ele 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 fornecida para o método “pushState()”:
janela. história . pushState ( estado , título , url ) ;
Aqui:
- “ estado ” representa a nova entrada do 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 “ modificaUrl() ”função no clique do botão:
< botão ao clicar = 'modifyUrl('CSS Tutorial', 'CSSTutorial.html');' > 2 botão >
< botão ao clicar = 'modifyUrl('JavaScript Tutorial', 'JavaScriptTutorial.html');' > 3 botão >
< botão ao clicar = 'modifyUrl('Java Tutorial', 'JavaTutorial.html');' > 4 botão >
Defina uma função “ modificaUrl() ” em um arquivo JavaScript que será acionado com o clique do botão. Leva dois parâmetros, o “ título ' e a ' url ”. Quando o método for chamado ao clicar no botão, o “título” e a “url” serão passados como argumentos. Verifique o tipo de “ pushState ” do objeto histórico, se não for “ indefinido ”. Em seguida, ligue para o “ histórico.pushState() ” método para alterar o URL:
função modificarUrl ( título , url ) {
se ( tipo de ( história. pushState ) != 'indefinido' ) {
era obj = {
Título : título ,
url : url
} ;
história. pushState ( obj , obj. Título , obj. url ) ;
}
}
Pode-se ver que a cada clique no botão, o URL será alterado com sucesso sem recarregar a página:
Na saída acima, você pode ver que o botão de seta para trás no canto superior esquerdo ( <- ) estiver ativado ao clicar no botão, indica que você pode navegar para frente e para trás porque o “ pushState() ” adiciona o novo URL na pilha de histórico.
Método 2: Modifique a URL em JavaScript sem recarregar a página usando o método “replaceState()”
Use o ' substituirEstado() ” para modificar o URL sem recarregar a página da web. É também uma característica do “ Objeto histórico ” mas não adicionará uma nova entrada à pilha de histórico. Ele altera o estado existente do histórico do navegador e o 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()”:
Exemplo
Na função definida, chame o método “ substituirEstado() ” para substituir o URL no clique do botão sem recarregar ou navegar na página:
se ( tipo de ( história. substituirEstado ) != 'indefinido' ) {
era obj = {
Título : título ,
url : url
} ;
história. substituirEstado ( obj , obj. Título , obj. url ) ;
}
}
A saída indica que, a cada clique do botão, o URL foi alterado e não há opção de navegar para voltar, pois o botão de seta para trás está desativado:
Fornecemos todas as informações essenciais relevantes para a modificação da URL sem recarregar a página em JavaScript.
Conclusão
Para modificar/alterar o URL sem atualizar a página da web, use o botão “ pushState() ” ou o método “ substituirEstado() ” 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. Já o método “replaceState()” substitui a URL e não permite ir para a página de trás. Este artigo descreveu os métodos para modificar o URL sem recarregar a página da Web usando JavaScript.