Redireccion Automatica de Paginas Web con Javascript

En ocasiones quizás no podamos aprovechar las ventajas de las redirecciones mediante Php ni retocando el archivo .htaccess y tengamos que recurrir a otros medios. Usar Javacript es una de las alternativas, aunque tiene claro su pros y sus contras.

Ventajas de las redirecciones mediante Javascript

No necesitamos acceso al archivo .htaccess
No es necesario que el servidor ejecute archivos Php.
Puedes avisar al usuario de que se va a realizar una redirección segundos antes.
Solo hay que editar el Html de las páginas

Inconvenientes en el uso de redirecciones mediante Javascript

Necesitas mantener los archivos antiguos, en los que se coloca la redirección.
No valen de nada en cuanto a posicionamiento.
Puede no funcionar según qué navegador use el visitante y según tenga o no activa la ejecución de Javascript.

Redirección instantanea y automática mediante Javascript

La forma más sencilla que se me ocurre es añadir dentro del head de cada una de las webs desde las que queramos hacer la redirección a otra, las siguientes líneas de código Javascript:

También funciona de este modo:

y también con cualquiera de estas dos sentencias:

document.location.href=pagina.html;
o
parent.location=pagina.html;
y
window.location.href=pagina.html;

En este caso la redirección es instantanea. Quizás en el tiempo que pasa hasta que se realiza la redirección se muestre algo del contenido de esa página, por lo que quizás te interese vaciar el contenido y colocar el código justo que necesitas, sin añadir el código que realmente no se va a ver (pues va a actuar la redirección).

Pero también es posible que te interese que se vea todo el contenido de esa página antes de enviar al usuario a la página nueva. En ese caso interesa hacer lo siguiente, meter el comando que hace la redirección dentro de una función y, llamar a esa función a través de otra función que genera retardos. Veamoslo.

Redirección automática mediante Javascript con retardo

En esta ocasión, definimos una función llamada "redireccionar" que ordena la redirección a la web de destino indicada entre las comillas. No olvides añadir "http://" cuando la página sea externa, o no funcionará correctamente. Después, como ves, se ejecuta el setTimeout, que lo que hace es ejecutar la función "redireccionar" cuando hayan pasado 5000 microsegundos, o lo que es lo mismo, 5 segundos.

<head>
<script>
function redireccionar(){window.location="http://www.web-de-destino.com";}
setTimeout ("redireccionar()", 5000);
</script>
</head>

Mientras dura ese retardo puedes enviar un mensaje de aviso al visitante, lo que viene a llamarse en Javascript un "Alert". Para ello bastaría con añadir esta línea al código anterior:

<head>
<script>
alert('Te estaremos redireccionando a www.web-de-destino.com en 5 segunditos');
function redireccionar(){window.location="http://www.web-de-destino.com";}
setTimeout ("redireccionar()", 5000);
</script>
</head>

Este otro código debería funcionar igualmente:

<head>
<script>
function redireccionar(){location.href="http://www.web-de-destino.com";}
setTimeout ("redireccionar()", 5000);
</script>
</head>

Otro modo de definir esta función sería así, definiendo una variable que contenga la nueva dirección (pagina) y otra que guarde la cantidad de segudos de espera antes de la redirección (segundos). Luego se define la función "redireccion" y se ejecuta termporizadamente con setTimeout que toma como valor de temporización la cantidad definida de segudos, multiplicada por 1.000 pues como recuerdas, ese valor ha de ir en milisegundos. Quedaría tal que así:

<head>
<script>
var pagina = 'http://www.web-de-destino.com';
var segundos = 5;
function redireccion() { document.location.href=pagina;}
setTimeout("redireccion()",segundos*1000);
</script>
</head>

Guardar el Script en un archivo aparte

Si esta redirección quieres hacerla no en una o dos páginas de tu web, sino en muchas de ellas, quizás prefieras guardar el script dentro de un archivo y colocar en el head solamente una llamada hacia el mismo. De este modo, la ventaja que tienes es que si alguna vez quieres modificar el tiempo de espera antes de la redirección, o la url de la página de destino, solo tienes que modificar el contenido de ese archivo. Es más, si alguna vez quieres anular la redirección, te basta con dejar el archivo en blanco, de modo que lo que se ejecuta sea... nada, sin necesidad de volver a editar, guardar y subir al servidor todas las páginas modificadas.

Para esto basta con guardar todo el código del script dentro de un archivo llamado por ejemplo "redireccion.js" y en el head de cada una de las páginas en las que queremos que funcione la redirección añadir esta línea:

Al guardar el contenido de código Javascript (lo que viene a ser el script) dentro del archivo redireccion.js, no es necesario añadir también las etiquetas <script> y </script>. Basta con añadir tan solo el código que tengas dentro de esas etiquetas, en nuestro caso, por ejemplo esto:

var pagina = 'http://www.web-de-destino.com';
var segundos = 5;
function redireccion() { document.location.href=pagina;}
setTimeout("redireccion()",segundos*1000);

Activar la redirección al ejecutarse un evento en la página

Una ventaja de usar Javascript es que éste se ejecuta en el ordenador del usuario y no desde el servidor donde se aloja la web. Esto permite aprovechar algunas acciones realizadas por el usuario para disparar algunas funciones. Por ejemplo, es posible gracias a JavaScript, ejecutar la función en la que definimos la redirección, cuando el usuario pase el ratón por cieta area, o cuando haga clic en algún link concreto, o cuando su navegador cargue el contenido completa de nuestra web, o cuando pulse una tecla o despliegue un select.... hay muchas opciones disponibles.

Por ejemplo, si queremos que el tiempo de retardo empiece a contar a partir de que toda la página se haya cargado completamente, podemos hacerlo añadiendo este cacho de código dentro de la etiqueta <body>:

<head>
.....
<script>
function redireccionar(destino){ location.href= destino;}
</script>
</head>
<body onload="redireccionar("http://www.web-de-destino.com");">
....

Podemos añadir otras cosas dentro del onload para conseguir el mismo efecto:

<head>
.....
<script>
var destino = "http://www.web-de-destino.com";
function redireccionar(){location.href= destino;}
</script>
<body onload="setTimeout(redireccionar, 5);">
....

e incluso pasar todo el script allí, como en este ejemplo:

Pero como deciamos antes, no solo puedes forzar a ejecutar una acción cuando termina de cargarse el contenido de la página, sino también cuando el visitante haga clic en cierto enlace:

<a href="#" onclick="redireccion(); return false;">Click

cuando despliegue un select:

<select onchange="redireccionar(); return false;">
<option value"http://wwww.web-de-destino1.com">http://wwww.web-de-destino1.com</option>
<option value"http://wwww.web-de-destino2.com">http://wwww.web-de-destino2.com</option>
</select>

o en cualquiera de los eventos siguientes:

onchange Cuando se produce un cambio en el estado de un elemento
onsubmit Al enviar un formulario
onreset Al resetear un formulario
onselect Al seleccionar un elemento
onblur Cuando un elemento pierde el foco
onfocus Cuando se enfoca un elemento
onkeydown Al pulsar una tecla
onkeypress Al mantener una tecla pulsada
onkeyup Al soltar una tecla
onclick Al hacer clic con el ratón
ondblclick Al hacer doble clic con el ratón
onmousedown Al presionar un botón del ratón
onmousemove Al mover el puntero del ratón
onmouseout Cuando el puntero del ratón se sale de cierta zona de la pantalla
onmouseover Cuando el puntero del ratón entra o pasa sobre cierta zona
onmouseup Al liberar un botón del ratón

Existen otros poquitos eventos pero no son standar, como onResize, onMove, onScroll, onAbort, pero por ese mismo motivo mejor no los usaremos.

Redireccionar según el navegador utilizado por el visitante

Gracias a Javascript se puede incluso hacer una redirección según el navegador que esté usando el visitante. De este modo podrías mandarlo a una página u otra según nos visite con un dispositivo movil o con un portatil u ordenador de sobremesa. Podría serte útil en algunos casos. El código sería algo así como:

Decisión final y consejos

Ahora que sabes todo lo que puedes hacer con JavaScript para redireccionar páginas web, te toca elegir el método. La recomendación es siempre hacer los redireccionamientos de páginas web mediante el archivo .htaccess y/o con Php, no lo olvides. De ese modo todo el trabajo es realizado por el servidor y al cliente, navegante, usuario o robot le llega el trabajo ya hecho. Evitas además que el "truco" no funcione si el usuario tiene el JavaScript deshabilitado en su navegador. No obstante, por si no podemos acceder al htaccess ni podemos programar en Php, podemos recurrir a hacer el redireccionamiento desde el lado cliente mediante JavaScript, claro.