Exemplos de redirect
Exemplo 1
No exemplo a seguir demonstramos como redirecionar o usuário para uma página qualquer assim que o usuário acessar o endereço responsável por exibir o HTML abaixo:
<div class="pre_xml"><code>
<html>
<head>
<title>Pagina 1</title>
<meta charset="utf-8">
</head>
<body>
Pagina exemplo 1
<script>
window.location.href = "https://www.devmedia.com.br/";
</script>
</body>
</html>Ao acessar a
página 1 o usuário é redirecionado para a página da DevMedia assim que a página
1 é renderizada. Outra opção é chamar apenas window.location, ao invés de window.location.href.
Exemplo 2
No exemplo a seguir temos um código semelhante ao
anterior. No entanto, o redirecionamento foi definido dentro do <head>.
<div class="pre_xml"><code>
<html>
<head>
<script>
window.location.href = "https://www.devmedia.com.br/";
</script>
<meta charset="utf-8">
</head>
<body>
Pagina exemplo 1
</body>
</html>
Ao acessar a
página 1 o usuário é redirecionado imediatamente para a página da DevMedia.
Outra opção é chamar apenas window.location, ao invés de window.location.href.
Exemplo 3
No exemplo a seguir demonstramos como redirecionar
o usuário para outra página após determinado período de tempo, neste caso,
cinco segundos.
<div class="pre_xml"><code>
<html>
<head>
<title>Pagina 2</title>
<meta charset="utf-8">
</head>
<body>
Pagina exemplo 2
<script>
setTimeout(function() {
window.location.href = "https://www.devmedia.com.br/";
}, 5000);
</script>
</body>
</html>
Ao acessar a
página 2, apenas após cinco segundos o usuário será redirecionado para a página
da DevMedia. Diferentemente do exemplo anterior, dessa forma o usuário consegue
visualizar o conteúdo da atual por determinado período.
Exemplo 4
No exemplo a seguir demonstramos como redirecionar
o usuário para outra página de acordo com alguma condição.
<div class="pre_xml"><code>
<html>
<head>
<title>Pagina 3</title>
<meta charset="utf-8">
</head>
<body>
Pagina exemplo 3
<script>
statusUsuario = "Ativo";
if (statusUsuario == "Ativo") {
window.location.href = "https://www.devmedia.com.br/";
}
</script>
</body>
</html>
Ao acessar a
página 3 o usuário será redirecionado para a página da DevMedia apenas se statusUsuario
for “Ativo”; como neste exemplo. Caso não seja, o usuário não será
redirecionado.
Exemplo 5
No exemplo a seguir demonstramos como redirecionar
o usuário para outra página com o método assign().
<div class="pre_xml"><code>
<html>
<head>
<title>Home</title>
<meta charset="utf-8">
</head>
<body>
Home comum
<script>
window.location.assign("https://www.devmedia.com.br/guia/javascript/34372");
</script>
</body>
</html>
Ao acessar essa
página o usuário é redirecionado para o Guia JavaScript da DevMedia.
Exemplo 6
No exemplo a seguir demonstramos como redirecionar
o usuário para outra página com o método replace().
<div class="pre_xml"><code>
<html>
<head>
<title>Home</title>
<meta charset="utf-8">
</head>
<body>
Home comum
<script>
window.location.replace("https://www.devmedia.com.br/guia/javascript/34372");
</script>
</body>
</html>
Ao acessar
essa página o usuário é redirecionado para a página da DevMedia. O método replace()
evita que o usuário volte para a página anterior através do botão voltar do
navegador. Ele substitui, no histórico, o registro da última página acessada
pela página que o usuário passará a visualizar.
Exemplo 7
No exemplo a seguir demonstramos como redirecionar
o usuário quando este clica em um botão.
<div class="pre_xml"><code>
<html>
<head>
<title>Home</title>
<meta charset="utf-8">
</head>
<body>
Home comum
<button onclick="redirecionar()">Acessar DevMedia</button>
<script>
function redirecionar() {
window.location.href = "http://www.devmedia.com.br";
}
</script>
</body>
</html>
Ao acessar a
página home o usuário será redirecionado para a página da DevMedia após clicar
em um botão.
