JavaScript: redirección de página

¿Qué es la redirección de página?

Es posible que haya encontrado una situación en la que hizo clic en una URL para llegar a una página X, pero internamente se le dirigió a otra página Y. Sucede debido a page redirection. Este concepto es diferente al de Actualización de página de JavaScript .

Puede haber varias razones por las que le gustaría redirigir a un usuario desde la página original. Enumeramos algunas de las razones:

  • No le gustó el nombre de su dominio y se está mudando a uno nuevo. En tal escenario, es posible que desee dirigir a todos sus visitantes al nuevo sitio. Aquí puede mantener su antiguo dominio pero poner una sola página con una redirección de página de modo que todos los visitantes de su antiguo dominio puedan acceder a su nuevo dominio.

  • Ha creado varias páginas según las versiones del navegador o sus nombres o puede estar basado en diferentes países, luego, en lugar de usar la redirección de la página del lado del servidor, puede usar la redirección de la página del lado del cliente para que sus usuarios accedan a la página correspondiente.

  • Es posible que los motores de búsqueda ya hayan indexado sus páginas. Pero mientras se cambia a otro dominio, no le gustaría perder visitantes que ingresan a través de los motores de búsqueda. Entonces puede usar la redirección de página del lado del cliente. Pero tenga en cuenta que esto no debe hacerse para engañar al motor de búsqueda, ya que podría hacer que su sitio sea prohibido.

¿Cómo funciona la redirección de página?

Las implementaciones de Page-Redirection son las siguientes.

Ejemplo 1

Es bastante simple hacer una redirección de página usando JavaScript en el lado del cliente. Para redirigir a los visitantes de su sitio a una nueva página, solo necesita agregar una línea en la sección de encabezado de la siguiente manera.

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

Salida

Ejemplo 2

Puede mostrar un mensaje apropiado a los visitantes de su sitio antes de redirigirlos a una nueva página. Esto necesitaría un poco de retraso para cargar una nueva página. El siguiente ejemplo muestra cómo implementar el mismo. aquísetTimeout() es una función JavaScript incorporada que se puede utilizar para ejecutar otra función después de un intervalo de tiempo determinado.

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

Salida

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

Ejemplo 3

El siguiente ejemplo muestra cómo redirigir a los visitantes de su sitio a una página diferente según sus 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>