JavaScript redirect: Redirecionando o usu�rio com window.location

JavaScript redirect

Nesta documentaç�o de JavaScript veremos como redirecionar o usu�rio utilizando window.location.href, assign() e replace().

Apresentaremos aqui como redirecionar o usu�rio em JavaScript.

JavaScript redirect: Na pr�tica


// Redireciona o usu�rio para a p�gina da DevMedia assim que 
// a p�gina atual � carregada
window.location.href = "http://www.devmedia.com.br"; 

// Redireciona o usu�rio para a p�gina da DevMedia ap�s cinco segundos
setTimeout(function() {
    window.location.href = "http://www.devmedia.com.br";
}, 5000);

// Redireciona o usu�rio para a p�gina da DevMedia se status for �Ativo�
status = "Ativo"; 

if (status == "Ativo") {
    window.location.href = "http://www.devmedia.com.br";
}

// Redireciona o usu�rio para o Guia Carreira Programador Front-end
perfil = "Intermedi�rio"; 

if (perfil == "Iniciante") {
    window.location.href = "https://www.devmedia.com.br/guia/javascript/34372";
} else if (perfil == "Intermedi�rio") {
    window.location.href = 
     "https://www.devmedia.com.br/guia/carreira-programador-front-end/38792";    
} else {
    window.location.href = "https://www.devmedia.com.br/guia/html/38051";    
}

// Redireciona o usu�rio para a p�gina da DevMedia 
// window.location.assign("http://www.devmedia.com.br");

// Redireciona o usu�rio para a p�gina da DevMedia 
// window.location.replace("http://www.devmedia.com.br");

Como funciona o redirecionamento

O redirecionamento faz com que o usu�rio saia da p�gina atual para outra p�gina. Quando precisar redirecionar o usu�rio para p�ginas diferentes com JavaScript, essa � a linha de c�digo a ser utilizada. Considerando o seguinte c�digo:


  window.location.href = "http://www.devmedia.com.br";

Assim que essa linha de c�digo � executada o usu�rio � redirecionado da p�gina em que se encontra para a p�gina principal da DevMedia, conforme a Figura 1.

Figura 1. Funcionamento do redirecionamento


  1- window.location.assign("http://www.devmedia.com.br");
  2- window.location.replace("http://www.devmedia.com.br");

Os m�todos assign() e replace() tamb�m s�o utilizados para redirecionar o usu�rio. A diferença entre eles � que o m�todo replace() redireciona o usu�rio, mas n�o mant�m a p�gina anterior no hist�rico. Dessa forma o usu�rio n�o conseguir� utilizar o bot�o voltar no browser para acessar a p�gina que estava em exibiç�o.

Sintaxe

window.location.href = �URL a ser acessada�

Aç�o executada

Assim que esse c�digo � executado pelo browser, o endereço especificado na string � direita � acessado e renderizado.

window.location.assign(url)

Par�metro

url � uma string contendo o endereço da p�gina a ser exibida.

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:


  <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>.


  <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.


  <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.


  <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().


  <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().


  <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.


  <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.

Compatibilidade entre navegadores

A propriedade window.location.href e os m�todos assign() e replace() s�o suportados por todos os browsers apresentados Tabela 1.

	Chrome	Firefox	IE	Edge	Safari	Opera
window.location.href	Sim	Sim	Sim	Sim	Sim	Sim
assign()	Sim	Sim	Sim	Sim	Sim	Sim
replace()	Sim	Sim	Sim	Sim	Sim	Sim

Tabela 1. Compatibilidade do m�todo x browsers.

Mais sobre JavaScript

JavaScript if/else: Criando scripts com estruturas condicionais

Curso de Introduç�o ao JavaScript

Cursos de JavaScript

Cursos

Curso de Introduç�o ao JavaScript

Curso

Gerando uma aç�o durante inatividade do usu�rio

Curso

JavaScript redirect: Redirecionando o usu�rio com window.location

Nesta documentação aprenderemos como redirecionar o usuário em JavaScript utilizando window.location.