Si estás empezando en el mundo del desarrollo web, algo interesante y que debes saber por si algún día lo necesitas son las redirecciones de URLs. En este tutorial podrás ver algunas formas de cómo redireccionar en HTML, PHP y JavaScript. Además se proporcionan ejemplos sencillos y una breve explicación.
Redireccionar en HTML
Aquí vamos a redirigir la navegación a una URL utilizando la etiqueta META, la sintaxis es la siguiente:
<meta http-equiv="acción" content="segundos"; url="url_destino" />[color=#a9a9a9]Código redirección HTML[/color]
Rellenar cada campo
- http-equiv: se pondrá la acción que deseamos que se ejecute.
- content: lo rellenaremos con el número de segundos que queremos que espere hasta ejecutar la acción, si ponemos 0 la acción será automática.
- url: será la url dónde queremos que se dirija la acción, debemos poner una ruta absoluta.
Vamos a ver ahora un ejemplo de redirección, la acción será Refresh, se hará después de 8 segundos y se redirigirá a Solvetic.
<html>
<head>
<meta http-equiv="Refresh" content="8"; url="http://www.solvetic.com">
</head>
<body>
<h3> Esta página se redirigirá a Solvetic en 8 segundos </h3>
</body>
</html>[color=#a9a9a9]Ej. redirección HTML[/color]
Redireccionar en JavaScript
Para redirigir el navegador a una nueva página en JavaScript se usa:
window.location[color=#a9a9a9]Código redirección JavaScript[/color]
Redirección directa, sin esperar
En esta redirección al cargar el script automáticamente se dirigirá a Solvetic.
<html>
<body>
<script type="text/javascript">
window.location="http://www.solvetic.com";
</script>
</body>
</html>[color=#a9a9a9]Ejemplo redirección directa JavaScript[/color]
Redirección con espera
Ahora utilizaremos la función setTimeout, que lo único que hará es esperar el número de milisegundos que le pasemos como segundo parámetro para ejecutar la función que escribimos como primer parámetro:
<html>
<head>
<meta charset="utf-8"/>
<script text="javascript">
setTimeout(redirigir,8000);
function redirigir(){
window.location="http://www.solvetic.com";
}
</script>
</head>
<body>
<p>Esta página se redirigirá a Solvetic.com en 8 segundos,
si prefieres ir ya pincha en este <a href="http://www.solvetic.com">enlace</a> </p>
</body>
</html>[color=#a9a9a9]Ejemplo redirección con espera JavaScript[/color]
Redirección al hacer click (sin href)
Usando assign de window.location cargaremos una nueva página:
<html>
<head>
<script>
function abrir() {
window.location.assign("www.solvetic.html")
}
</script>
</head>
<body>
<input type="button" value="Carga Solvetic" onclick="abrir()">
</body>
</html>[color=#a9a9a9]Ejemplo redirección al hacer clic sin Href[/color]
Redireccionar PHP
Para redireccionar URLs en PHP utilizamos la función header, la estructura es la siguiente:
<?php
header('Location: pagina_a_redirigir');
?>Si queremos redirigir a Solvetic cómo página externa, haríamos lo siguiente:
<?php
header('Location: http://www.solvetic.com');
?>Si queremos redirigir a una página interna, lo mejor es poner una ruta absoluta desde la raíz del servidor, quedaría algo así:
<?php
header('Location: /tutoriales/category/20-desarrollo/');
?>Ahora voy a poner un ejemplo de cómo redireccionar una página que ya no se encuentra en una URL original, en la URL que ya no existe tendremos una página con el siguiente código.
<?
header('Status: 301 Moved Permanently', false, 301);
header('Location: nuevaURL');
?>Recuerda cambiar "nuevaURL" por la URL que tiene esa página ahora.
Nota
La función header debe aparecer antes de cualquier código HTML.