JavaScript - Redirecionamento de página

O que é redirecionamento de página?

Você pode ter se deparado com uma situação em que clicou em um URL para acessar a página X, mas internamente foi direcionado para outra página Y. Isso acontece devido a page redirection. Este conceito é diferente da atualização da página JavaScript .

Pode haver vários motivos pelos quais você deseja redirecionar um usuário da página original. Estamos listando alguns dos motivos -

  • Você não gostou do nome do seu domínio e está mudando para um novo. Nesse cenário, você pode querer direcionar todos os visitantes para o novo site. Aqui você pode manter seu antigo domínio, mas colocar uma única página com um redirecionamento de página de forma que todos os visitantes do antigo domínio possam ir para o novo.

  • Você construiu várias páginas com base nas versões do navegador ou seus nomes ou pode ser baseado em diferentes países, então, em vez de usar o redirecionamento de página do lado do servidor, você pode usar o redirecionamento de página do lado do cliente para levar seus usuários à página apropriada.

  • Os motores de busca podem já ter indexado suas páginas. Mas ao mudar para outro domínio, você não gostaria de perder seus visitantes provenientes de mecanismos de pesquisa. Portanto, você pode usar o redirecionamento de página do lado do cliente. Mas tenha em mente que isso não deve ser feito para enganar o mecanismo de busca, pois pode levar o seu site a ser banido.

Como funciona o redirecionamento de página?

As implementações de Redirecionamento de Página são as seguintes.

Exemplo 1

É muito simples fazer um redirecionamento de página usando JavaScript no lado do cliente. Para redirecionar os visitantes do seu site para uma nova página, você só precisa adicionar uma linha na seção head da seguinte maneira.

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function Redirect() {
               window.location = "https://www.tutorialspoint.com";
            }
         //-->
      </script>
   </head>
   
   <body>
      <p>Click the following button, you will be redirected to home page.</p>
      
      <form>
         <input type = "button" value = "Redirect Me" onclick = "Redirect();" />
      </form>
      
   </body>
</html>

Resultado

Exemplo 2

Você pode mostrar uma mensagem apropriada aos visitantes do seu site antes de redirecioná-los para uma nova página. Isso precisaria de um pequeno atraso para carregar uma nova página. O exemplo a seguir mostra como implementar o mesmo. AquisetTimeout() é uma função JavaScript embutida que pode ser usada para executar outra função após um determinado intervalo de tempo.

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function Redirect() {
               window.location = "https://www.tutorialspoint.com";
            }            
            document.write("You will be redirected to main page in 10 sec.");
            setTimeout('Redirect()', 10000);
         //-->
      </script>
   </head>
   
   <body>
   </body>
</html>

Resultado

You will be redirected to tutorialspoint.com main page in 10 seconds!

Exemplo 3

O exemplo a seguir mostra como redirecionar os visitantes do seu site para uma página diferente com base em seus navegadores.

<html>
   <head>     
      <script type = "text/javascript">
         <!--
            var browsername = navigator.appName;
            if( browsername == "Netscape" ) {
               window.location = "http://www.location.com/ns.htm";
            } else if ( browsername =="Microsoft Internet Explorer") {
               window.location = "http://www.location.com/ie.htm";
            } else {
               window.location = "http://www.location.com/other.htm";
            }
         //-->
      </script>      
   </head>
   
   <body>
   </body>
</html>