Cargando



Formas de redireccionar HTML, PHP, JavaScript

Aprenderás cómo redireccionar URLs en HTML, PHP y JavaScript, con ejemplos sencillos y breves explicaciones


jun 13 2016 10:52
Básico
jun 13 2016 11:15

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.


¿Te ayudó este Tutorial?


1 Comentarios


Valerio Cabanillas
jun 14 2016 10:02

Gracias, queda claro algunas redirecciones que necesitaba.

 

saludos.

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X