Redirigir desde una página HTML

1580

¿Es posible configurar una página HTML básica para redirigir a otra página en carga?

html redirect xhtml meta html-head chobo
fuente
28
Para seguir los estándares web modernos y proporcionar una funcionalidad de navegador cruzado, prefiero usar este generador de redireccionamiento
Patartics Milán
1
Use .htaccess o IIS equivalente para hacer una redirección del lado del servidor. De esa manera, incluso si su página física desaparece, la redirección seguirá funcionando.
flith
1
insider.zone/tools/client-side-url-redirect-generator Es una pequeña herramienta agradable que garantiza la compatibilidad.
mackycheese21
2
Esa herramienta insider.zone hizo que mis redirecciones fueran todas minúsculas, causando 404s. Además, no hay forma de contactar a quien haya hecho la página al respecto.
Dan Jacobson el

Respuestas:

2152

Intenta usar:

<meta http-equiv="refresh" content="0; url=http://example.com/" />

Nota: colóquelo en la sección de la cabeza.

Además, para navegadores antiguos si agrega un enlace rápido en caso de que no se actualice correctamente:

<p><a href="http://example.com/">Redirect</a></p>

Aparecerá como

Redirigir

Esto aún te permitirá llegar a donde vas con un clic adicional.

Valerij
fuente
151
El Consorcio World Wide Web (W3C) desaconseja el uso de meta actualización. Ref: en.wikipedia.org/wiki/Meta_refresh . Por lo tanto, se recomienda utilizar en su lugar la redirección del servidor. Es posible que las redirecciones de JavaScript no funcionen en todos los teléfonos móviles, ya que JavaScript podría estar deshabilitado.
NinethSense
61
Para su información, los 0medios para actualizar después de 0 segundos. Es posible que desee darle al usuario más tiempo para saber qué está sucediendo.
Dennis
55
@Paul Draper, eso depende del servidor que estés ejecutando
Gal Margalit
99
Agregué el cierre de etiqueta para respetar las especificaciones XHTML5.
ZenLulz
98
El comentario de @NinethSense hace que la meta actualización parezca una redirección de JavaScript. La actualización meta no es JS y seguirá funcionando cuando JS esté deshabilitado.
Druska
1104

Me gustaría utilizar tanto en meta , y el código JavaScript y tendría un enlace por si acaso.

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="refresh" content="0; url=http://example.com">
        <script type="text/javascript">
            window.location.href = "http://example.com"
        </script>
        <title>Page Redirection</title>
    </head>
    <body>
        <!-- Note: don't tell people to `click` the link, just tell them that it is a link. -->
        If you are not redirected automatically, follow this <a href='http://example.com'>link to example</a>.
    </body>
</html>

Para completar, creo que la mejor manera, si es posible, es usar redireccionamientos del servidor, así que envíe un código de estado 301 . Esto es fácil de hacer a través de .htaccessarchivos usando Apache , o mediante numerosos complementos usando WordPress . Estoy seguro de que también hay complementos para todos los principales sistemas de gestión de contenido. Además, cPanel tiene una configuración muy fácil para redireccionamientos 301 si lo tiene instalado en su servidor.

Billy Moon
fuente
12
Esta página de redireccionamiento puede ser mucho más concisa con HTML5: pastebin.com/2qmfUZMk (que funciona en todos los navegadores y pasa la validación w3c)
enyo
99
@enyo No soy un gran fanático de soltar las bodyetiquetas y cosas por el estilo. Tal vez valide, y tal vez funcione en navegadores comunes. Estoy seguro de que hay algunos casos marginales que causa problemas, y el beneficio parece pequeño.
Billy Moon
99
@Fricker porque podrían no estar haciendo clic. Pueden estar controlando a través de la voz, tocando o navegando de alguna manera desconocida. Es una guía de accesibilidad para seguir los estándares para los controles, como usar el atributo estándar HTML A para el enlace, y pensar en él y comunicarlo como un enlace, y no prescribir cómo alguien debe interactuar con él. Además, click hereno se recomienda tener un enlace, ya que el lector de pantalla será más difícil de navegar. Los enlaces deben estar en un texto que describa el destino, para que el usuario sepa a dónde llegarán antes de seguirlo y, sin embargo, interactúe con él.
Billy Moon
2
@BillyMoon, en realidad, el significado de "clic" ya se ha sobrecargado para incluir todos esos significados también. "clic" estará bien.
Pacerier
2
@BillyMoon ¿en qué circunstancias ocasionales el navegador ignora la meta actualización de 0 valores? ¡Gracias!
Gal Margalit
125

JavaScript

<script type="text/javascript">
    window.location.href = "http://example.com";
</script>

Metaetiqueta

<meta http-equiv="refresh" content="0;url=http://example.com">
amit_g
fuente
40

Me gustaría también añadir un enlace canónico para ayudar a sus SEO personas:

<link rel="canonical" href="http://www.example.com/product.php?item=swedish-fish"/>
lrkwz
fuente
3
¿Usarías un enlace canónico además de una redirección? en.wikipedia.org/wiki/Canonical_link_element dice que Google prefiere el uso de una redirección en lugar de un enlace canónico.
LarsH
1
@larsH Entonces, ¿qué es lo más importante para SEO, es el enlace de redireccionamiento o la página de destino final?
Chakotay
@Chakotay See: ¿Cuándo debería elegir Canonical vs. 301 Redirect?
Marc.2377
28

La siguiente metaetiqueta, colocada entre el interior de la cabeza, le indicará al navegador que redirija:

<meta http-equiv="Refresh" content="seconds; url=URL">

Reemplace los segundos con el número de segundos a esperar antes de que redirija, y reemplace la URL con la URL a la que desea que redirija.

Alternativamente, puede redirigir con JavaScript. Coloque esto dentro de una etiqueta de script en cualquier lugar de la página:

window.location = "URL"
Peter Olson
fuente
28

Este es un resumen de todas las respuestas anteriores más una solución adicional usando el encabezado de actualización HTTP a través de .htaccess

1. Encabezado de actualización HTTP

En primer lugar, puede usar .htaccess para establecer un encabezado de actualización como este

Header set Refresh "3"

Este es el equivalente "estático" de usar la header()función en PHP

header("refresh: 3;");

Tenga en cuenta que esta solución no es compatible con todos los navegadores.

2. JavaScript

Con una URL alternativa :

<script>
    setTimeout(function(){location.href="http://example.com/alternate_url.html"} , 3000);
</script>

Sin una URL alternativa:

<script>
    setTimeout("location.reload(true);",timeoutPeriod);
</script>

Vía jQuery:

<script>
    window.location.reload(true);
</script>

3. Meta Refresh

Puede usar meta actualización cuando las dependencias en JavaScript y los encabezados de redireccionamiento no son deseados

Con una URL alternativa:

<meta http-equiv="Refresh" content="3; url=http://example.com/alternate_url.html">

Sin una URL alternativa:

<meta http-equiv="Refresh" content="3">

Utilizando <noscript>:

<noscript>
    <meta http-equiv="refresh" content="3" />
</noscript>

Opcionalmente

Según lo recomendado por Billy Moon, puede proporcionar un enlace de actualización en caso de que algo salga mal:

Si no es redirigido automáticamente: <a href='http://example.com/alternat_url.html'>Click here</a>

Recursos

RafaSashi
fuente
12
Su ejemplo "Via jQuery" no usa ningún jQuery.
Justin Johnson el
2
No llame setTimeoutcon una cuerda. Pase una función en su lugar.
Oriol
"Encabezado de actualización HTTP a través de .htaccess": ¿por qué es relevante en la pregunta sobre la redirección desde la página HTML?
reducción de actividad
26

Sería mejor configurar una redirección 301 . Consulte las redirecciones del artículo 301 de las Herramientas para webmasters de Google .

Alex K
fuente
13
La pregunta específicamente pide una página .html básica. Supongo que el autor de la pregunta no puede modificar .htaccess o similar (por ejemplo, usando páginas Github o alojamiento similarmente limitado). 301 no es factible en tales casos
Nicolas Raoul
26

Si desea seguir los estándares web modernos, debe evitar los meta redireccionamientos HTML simples. Si no puede crear código del lado del servidor, en su lugar, debe elegir la redirección de JavaScript .

Para admitir navegadores con JavaScript deshabilitado, agregue una línea de meta redireccionamiento HTML a un noscriptelemento. La noscriptmeta redirección anidada combinada con la canonicaletiqueta también ayudará a su posicionamiento en los motores de búsqueda.

Si desea evitar los bucles de redireccionamiento, debe usar la location.replace()función JavaScript.

Un código de redireccionamiento de URL del lado del cliente adecuado se ve así (con un Internet Explorer 8 y una corrección inferior y sin demora):

<!-- Pleace this snippet right after opening the head tag to make it work properly -->

<!-- This code is licensed under GNU GPL v3 -->
<!-- You are allowed to freely copy, distribute and use this code, but removing author credit is strictly prohibited -->
<!-- Generated by http://insider.zone/tools/client-side-url-redirect-generator/ -->

<!-- REDIRECTING STARTS -->
<link rel="canonical" href="https://stackoverflow.com/"/>
<noscript>
    <meta http-equiv="refresh" content="0; URL=https://stackoverflow.com/">
</noscript>
<!--[if lt IE 9]><script type="text/javascript">var IE_fix=true;</script><![endif]-->
<script type="text/javascript">
    var url = "https://stackoverflow.com/";
    if(typeof IE_fix != "undefined") // IE8 and lower fix to pass the http referer
    {
        document.write("redirecting..."); // Don't remove this line or appendChild() will fail because it is called before document.onload to make the redirect as fast as possible. Nobody will see this text, it is only a tech fix.
        var referLink = document.createElement("a");
        referLink.href = url;
        document.body.appendChild(referLink);
        referLink.click();
    }
    else { window.location.replace(url); } // All other browsers
</script>
<!-- Credit goes to http://insider.zone/ -->
<!-- REDIRECTING ENDS -->
Patartics Milán
fuente
2
w3.org/TR/WCAG10-HTML-TECHS/#meta-element incluye detalles sobre por qué <meta http-equiv="refresh"el W3C ha dejado de utilizarlo.
daxelrod
Los argumentos que proporciona el w3c contra las redirecciones HTML también se aplican a las redirecciones Javascript. Además, las redirecciones de JavaScript requieren que JavaScript esté habilitado, en contraste con las redirecciones de HTML. Por lo tanto, los redireccionamientos HTML son estrictamente mejores que los redireccionamientos Javascript en los casos en que uno puede usar ambos.
Max
17

Puede usar un "redireccionamiento" de META :

<meta http-equiv="refresh" content="0; url=http://new.example.com/address" />

o redireccionamiento de JavaScript (tenga en cuenta que no todos los usuarios tienen habilitado JavaScript, así que siempre prepare una solución de respaldo para ellos)

<script language="javascript">
  window.location = "http://new.example.com/address";
</script>

Pero preferiría usar mod_rewrite , si tiene la opción.

Tecnología
fuente
55
mod_rewrite (solo) se aplica a Apache.
Paul Draper
1
Con respecto a Apache: ¿Por qué mod_rewrite y no una simple directiva Redirect sin un módulo adicional?
vog
14

Tan pronto como se carga la página, se activa la initfunción y se redirige la página:

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <script>
            function init()
            {
               window.location.href = "www.wherever.com";
            }
        </script>
    </head>

    <body onload="init()">
    </body>
</html>
kkk
fuente
10

Coloque el siguiente código entre las etiquetas <HEAD> y </HEAD> de su código HTML:

<meta HTTP-EQUIV="REFRESH" content="0; url=http://example.com/index.html">

El código de redireccionamiento HTML anterior redirigirá a sus visitantes a otra página web al instante. Se content="0;puede cambiar a la cantidad de segundos que desea que el navegador espere antes de redirigir.

Muhammad Saqib
fuente
9

Pon el siguiente código en la <head>sección:

<meta http-equiv="refresh" content="0; url=http://address/">
Sebi
fuente
9

Encontré un problema mientras trabajaba con una aplicación jQuery Mobile , donde en algunos casos mi etiqueta de encabezado Meta no lograría una redirección correctamente (jQuery Mobile no lee los encabezados automáticamente para cada página, por lo que poner JavaScript allí también es ineficaz a menos que lo envuelva complejidad). Encontré que la solución más fácil en este caso era poner la redirección de JavaScript directamente en el cuerpo del documento, de la siguiente manera:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="refresh" content="0;url=myURL" />
    </head>

    <body>
        <p>You are not logged in!</p>
        <script language="javascript">
            window.location = "myURL";
        </script>
    </body>
</html>

Esto parece funcionar en todos los casos para mí.

escocés
fuente
8

La manera simple que funciona para todo tipo de páginas es simplemente agregar una metaetiqueta en la cabeza:

<html>
    <head>
        ...
        <meta HTTP-EQUIV="REFRESH" content="seconds; url=your.full.url/path/filename">
        ...
    </head>
    <body>
        Don't put much content, just some text and an anchor.
        Actually, you will be redirected in N seconds (as specified in content attribute).
        That's all.
        ...
    </body>
</html>
P. BANERJEE
fuente
7

Deberías usar JavaScript. Coloque el siguiente código en sus etiquetas principales:

<script type="text/javascript">
 window.location.assign("http://www.example.com")
</script>
kriscross07
fuente
7

Puede redirigir automáticamente mediante el Código de estado HTTP 301 o 302.

Para PHP:

<?php
    Header("HTTP/1.1 301 Moved Permanently");
    Header("Location: http://www.redirect-url.com");
?>
Vô Vị
fuente
66
Eso no es un redireccionamiento desde una página HTML.
bugmenot123
7

Utilizo un script que redirige al usuario desde index.html a la URL relativa de la página de inicio de sesión

<html>
  <head>
    <title>index.html</title>
  </head>
  <body onload="document.getElementById('lnkhome').click();">
    <a href="/Pages/Login.aspx" id="lnkhome">Go to Login Page<a>
  </body>
</html>
Zolfaghari
fuente
1
La URL de redireccionamiento en el método anterior puede ser relativa. por ejemplo: desea redirigir a la página de inicio de sesión o cualquier página relativa mediante index.html en la raíz del sitio web. No es necesario saber su nombre de dominio. pero cuando configuras window.location.href = "xxx"; Debes saber el nombre de dominio.
Zolfaghari
6

Solo por si acaso:

<?php
header("Location: [email protected]", TRUE, 303);
exit;
?>

Asegúrese de que no haya ecos encima del script; de lo contrario, se ignorará. http://php.net/manual/en/function.header.php

Eduardo
fuente
99
La pregunta específicamente pide una página .html básica. Supongo que el autor de la pregunta no puede modificar .htaccess o similar (por ejemplo, usando páginas Github o alojamiento similarmente limitado). PHP no está disponible en tales casos.
Nicolas Raoul
Consideraría que algo generado por PHP (procesador de pre-hipertexto) es una "página HTML básica". En ninguna parte de la pregunta mencionó un tipo de archivo.
Edward
6

Solo use el evento de carga de la etiqueta del cuerpo:

<body onload="window.location = 'http://example.com/'">
Pat Capozzi
fuente
5

Motor de afeitar para un retraso de 5 segundos:

<meta http-equiv="Refresh"
         content="5; [email protected]("Search", "Home", new { id = @Model.UniqueKey }))">
JoshYates1980
fuente
Eso no es un redireccionamiento desde una página HTML.
reducción de la actividad
5 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Redirect to a page</title>
    </head>
    <body onload="window.location.assign('http://example.com')">

    </body>
</html>
PoM
fuente
4

No necesita ningún código JavaScript para esto. Escriba esto en la <head>sección de la página HTML:

<meta http-equiv="refresh" content="0; url=example.com" />

Tan pronto como la página se cargue a los 0 segundos, puede ir a su página.

Yash Jain
fuente
1
esto ya está cubierto en la respuesta aceptada y los comentarios principales - considere editar la respuesta que publicar una duplicada
RozzA
3

Según tengo entendido, todos los métodos que he visto hasta ahora para esta pregunta parecen agregar la ubicación anterior a la historia. Para redirigir la página, pero no tengo la ubicación anterior en el historial, utilizo el replacemétodo:

<script>
    window.location.replace("http://example.com");
</script>
Paul Ogilvie
fuente
2

Esta es una solución de redireccionamiento con todo lo que quería pero no pude encontrar en un fragmento limpio y agradable para cortar y pegar.

Este fragmento tiene una serie de ventajas:

  • le permite capturar y retener cualquier parámetro de cadena de consulta que la gente tenga en su url
  • hace que el enlace sea único para evitar el almacenamiento en caché no deseado
  • le permite informar a los usuarios de los nombres antiguos y nuevos del sitio
  • muestra una cuenta regresiva configurable
  • se puede usar para redireccionamientos de enlaces profundos, ya que conserva los parámetros

Cómo utilizar:

Si migró un sitio completo, en el servidor anterior, detenga el sitio original y cree otro con este archivo como el archivo index.html predeterminado en la carpeta raíz. Edite la configuración del sitio para que cualquier error 404 sea redirigido a esta página index.html. Esto atrapa a cualquiera que acceda al sitio anterior con un enlace a una página de subnivel, etc.

Ahora vaya a la etiqueta del script de apertura y edite las direcciones web de oldsite y newSite, y cambie el valor de los segundos según sea necesario.

Guarda e inicia tu sitio web. Trabajo hecho - hora de tomar un café.

<!DOCTYPE html>
<html>
<head>
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">
<style>
body { margin: 200px; font: 12pt helvetica; }
</style>

</head>
<body>

</body>
<script type="text/javascript">

// Edit these to suit your needs.
var oldsite = 'http://theoldsitename.com'
var newSite = "https://thenewsitename.com";
var seconds = 20;  // countdown delay.

var path = location.pathname;
var srch = location.search;
var uniq = Math.floor((Math.random() * 10000) + 1);
var newPath = newSite + path + (srch === '' ? "?" + uniq : srch + "&" + uniq); 


document.write ('<p>As part of hosting improvements, the system has been migrated from ' + oldsite + ' to</p>');
document.write ('<p><a href="' + newPath + '">' + newSite + '</a></p>');
document.write ('<p>Please take note of the new website address.</p>');
document.write ('<p>If you are not automatically redirected please click the link above to proceed.</p>');
document.write ('<p id="dvCountDown">You will be redirected after <span id = "lblCount"></span>&nbsp;seconds.</p>');

function DelayRedirect() {
    var dvCountDown = document.getElementById("dvCountDown");
    var lblCount = document.getElementById("lblCount");
    dvCountDown.style.display = "block";
    lblCount.innerHTML = seconds;
    setInterval(function () {
        seconds--;
        lblCount.innerHTML = seconds;
        if (seconds == 0) {
            dvCountDown.style.display = "none";
            window.location = newPath;
        }
    }, 1000);
}
DelayRedirect()

</script>
</html>
Expandir fragmento

Wombat vencido
fuente
1

Redireccionar usando JavaScript, <noscript>en caso de que JS esté deshabilitado.

<script>
    window.location.replace("https://google.com");
</script>

<noscript>
    <a href="https://google.com">Click here if you are not redirected automatically.</a>
</noscript>
Aryan Beezadhur
fuente
0

Usa este código:

<meta http-equiv="refresh" content="0; url=https://google.com/" />

Por favor, preste atención: póngalo en la etiqueta de la cabeza.

AmerllicA
fuente
No sé por qué mi respuesta votó dos veces abajo. funciona correctamente
AmerllicA
La misma solución publicada por usted ya la han publicado varios usuarios anteriormente.
Rahul Shah
0

Puedes hacerlo en javascript:

location = "url";
GameMaster1928
fuente
0

Puedes usar esto

<meta http-equiv="refresh" content="0; url=http://newpage.com/" />
Expandir fragmento

mgcarpizo
fuente