Redirecionar para uma página da web em JavaScript

1. JavaScript redireciona uma página da web com location.href()
2. JavaScript redireciona uma página da web com location.replace()
3. 3. JavaScript redireciona uma página da web com location.assign()
4. 4. JavaScript redireciona uma página da web criando um elemento âncora dinamicamente
5. Conclusão

Existem várias maneiras em JavaScript de redirecionar o usuário. Depende dos requisitos de negócios de que tipo de comportamento de redirecionamento o site deve ter. Você pode redirecionar seus usuários das seguintes maneiras:

1. location.href()
2. location.replace()
3. location.assign()
4. Crie o elemento âncora dinamicamente

JavaScript redireciona uma página da web com location.href()

Use a interface location em conjunto com os objetos Document e Window para redirecionar. Normalmente, window.location.href retorna o URL da página atual. Por exemplo, se você executar o código a seguir, verá o URL da página:

console.log(window.location.href)

Resultado:

"https://www.delftstack.com/"

O truque é substituir esse URL atribuindo um URL diferente a window.location.href. Isso fará com que o navegador carregue a página especificada pela URL, redirecionando para ela. Em termos de pilha de histórico do site, este método altera o URL de referência atual. O código a seguir irá navegar para a página de instruções de DelfStack.

window.location.href = 'https://www.delftstack.com/howto/';

Observações:

1. Depois que o novo URL é carregado, a página da web mais antiga pode ser acessada pelo botão Voltar do navegador.
2. É o método mais comumente usado para redirecionamento

JavaScript redireciona uma página da web com location.replace()

Se você deseja mover-se permanentemente para uma página da web, use o location.replace. A diferença é que location.replace substituirá o URL atual por um novo URL. Portanto, o usuário não poderá voltar para o URL anterior. Em termos de pilha de histórico do navegador, o método exibe a última URL da página da web e coloca a URL no valor.

window.location.replace('https://www.delftstack.com');

Executar isso carregará o site https://www.delftstack.com.

Observações:

1. Recomendamos usar este método apenas quando necessário.
2. Não se pode voltar ao link anterior usando este método. Portanto, pode não ser uma boa experiência do usuário.

3. JavaScript redireciona uma página da web com location.assign()

Como o location.replace(), o método assign() vem com a diferença de que o link atual permanece no histórico do navegador. Assim, o usuário poderá voltar à página anterior usando o botão Voltar do navegador. Este método também usa o URL de destino como parâmetro.

window.location.assign('https://www.delftstack.com');

4. JavaScript redireciona uma página da web criando um elemento âncora dinamicamente

Em navegadores mais antigos, especialmente o Internet Explorer, com a versão 8 ou inferior, a interface de localização não é compatível. Portanto, criamos uma tag âncora (<a>) dinamicamente e definimos o atributo href com o URL de destino. Conforme mencionado anteriormente, a tag âncora é um elemento passivo que requer interação do usuário para invocá-la. Portanto, um evento de clique é disparado no código para fazer o redirecionamento funcionar.

let targetURL = 'https://www.delftstack.com';
let newURL = document.createElement('a');
newURL.href = targetURL;
document.body.appendChild(newURL);
newURL.click();

Aqui, conseguimos o redirecionamento por:

1. Criação de um elemento de tag âncora document.createElement('a');
2. Definindo a propriedade href com o novo URL newURL.href = targetURL
3. Anexando a tag criada dinamicamente ao nó DOM com document.body.appendChild(newURL)
4. Finalmente, invocando-o emulando um clique do usuário em newURL.click()

O navegador carregará o novo URL.

Conclusão

Dependendo dos requisitos de negócios, será bom usar o método de atualização meta para redirecionar um usuário assim que ele acessar a página da web do site em manutenção. Usar a tag âncora é bastante comum se a navegação for baseada no clique do usuário. Podemos usar métodos da interface Location em JavaScript, o window.location.href e window.location.assign(), para enviar programaticamente um usuário para um novo URL.