Modificando o URL em JavaScript sem recarregar a página

Alterando o URL dinamicamente com JavaScript

Ao trabalhar com aplicativos da web modernos, você pode precisar modificar o URL sem acionar o recarregamento da página. Isso pode ser especialmente útil para criar uma experiência de usuário perfeita.

Neste guia, exploraremos métodos para alterar a parte do URL após o domínio, incluindo técnicas que permitem acessar a parte antes do símbolo de hash (#). Isso garante a conformidade com as políticas de vários domínios e, ao mesmo tempo, consegue a modificação de URL desejada.

Explicação detalhada da modificação de URL em JavaScript

O primeiro script utiliza o history.pushState() método, que faz parte da API History. Este comando permite que os desenvolvedores adicionem uma nova entrada à pilha do histórico de sessões do navegador, alterando efetivamente a URL exibida na barra de endereço sem recarregar a página. No roteiro, const newURL = "/page2.php"; define o novo caminho e history.pushState(null, "", newURL); altera o URL para este novo caminho. Ao embrulhar o history.pushState comando em uma função como function changeURL(newPath), podemos atualizar dinamicamente o URL conforme necessário. Essa técnica é especialmente útil para aplicativos de página única (SPAs), onde o conteúdo muda dinamicamente sem recarregar a página inteira.

O segundo script aborda a alteração do hash da URL usando window.location.hash. Esta propriedade obtém ou define a parte âncora da URL que segue o símbolo de hash (#). Definindo const hashValue = "newSection"; e window.location.hash = hashValue;, o hash do URL muda para #newSection sem recarregar a página. Essa abordagem é útil para navegar na mesma página ou vincular a seções específicas de um documento. Além disso, a função function updateHash(newHash) encapsula essa funcionalidade, facilitando a alteração dinâmica da parte hash da URL. Ambos os scripts fornecem maneiras perfeitas de modificar o URL e melhorar a experiência do usuário, evitando recarregamentos desnecessários de páginas.

const newURL = "/page2.php";
history.pushState(null, "", newURL);
// This changes the URL to /page2.php without reloading the page

function changeURL(newPath) {
    window.history.pushState({}, "", newPath);
}
// Example usage
changeURL("/page2.php");

const hashValue = "newSection";
window.location.hash = hashValue;
// This changes the URL hash to #newSection

function updateHash(newHash) {
    window.location.hash = newHash;
}
// Example usage
updateHash("newSection");

Explorando métodos adicionais para modificar o URL sem recarregar

Outro aspecto de modificar o URL sem recarregar a página envolve o uso do replaceState() método da API History. Enquanto pushState() adiciona uma nova entrada no histórico, replaceState() modifica a entrada atual do histórico. Isso pode ser particularmente útil quando você deseja alterar o URL sem sobrecarregar o histórico do usuário com vários estados. Por exemplo, se você tiver um aplicativo de página única em que o conteúdo muda com frequência, talvez você queira atualizar a URL para refletir o estado atual sem adicionar cada alteração ao histórico. Isso mantém a funcionalidade do botão Voltar limpa e fácil de usar.

Usar replaceState(), você pode escrever uma função semelhante a changeURL() mas em vez disso ligue history.replaceState() dentro dele. Por exemplo, function replaceURL(newPath) poderia utilizar history.replaceState(null, "", newPath); para atualizar o URL. Essa técnica é valiosa para melhorar a experiência do usuário, mantendo a URL sincronizada com o estado do aplicativo sem criar entradas desnecessárias no histórico. Além disso, oferece uma forma mais eficiente de gerenciar o histórico do navegador, principalmente em aplicações web dinâmicas.