Redirigir desde una página HTML

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

preguntado el 23 de marzo de 11 a las 17:03

Para seguir los estándares web modernos y proporcionar la funcionalidad de varios navegadores, prefiero usar este avanzado generador de redireccionamiento -

Utilice .htaccess o IIS equivalente para realizar una redirección del lado del servidor. De esa manera, incluso si su página física desaparece, la redirección seguirá funcionando. -

insider.zone/tools/client-side-url-redirect-generator Es una pequeña herramienta que garantiza la compatibilidad. -

Esa herramienta insider.zone hizo que mis redireccionamientos fueran todos en minúsculas, causando 404s. Además, no hay forma de contactar a quien hizo la página al respecto. -

26 Respuestas

Intente usar:

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

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

Además, para los navegadores más 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

Redireccionar

Esto aún le permitirá llegar a su destino con un clic adicional.

Respondido 21 Jul 17, 10:07

El Consorcio World Wide Web (W3C) desaconseja el uso de la actualización de metadatos. Árbitro: en.wikipedia.org/wiki/Meta_refresh. Por lo tanto, se recomienda utilizar la redirección del servidor en su lugar. Es posible que los redireccionamientos de JavaScript no funcionen en todos los teléfonos móviles, ya que es posible que JavaScript esté deshabilitado. - Noveno Sentido

FYI, el 0 significa actualizar después de 0 segundos. Es posible que desee darle al usuario más tiempo para saber qué está sucediendo. - Dennis

@Paul Draper, eso depende del servidor que esté ejecutando - gal margalit

Agregué el cierre de la etiqueta para respetar las especificaciones XHTML5. - Jaime

El comentario de @ NinethSense hace que la meta actualización parezca una redirección de JavaScript. La meta actualización es no JS y seguirá funcionando cuando JS esté deshabilitado. - Sal

Usaría ambos metay 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 301 código de estado. Esto es fácil de hacer a través de .htaccess archivos usando APACHE, oa través de 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.

Respondido el 08 de diciembre de 17 a las 14: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

@enyo no soy un gran fan de dejar caer el body etiquetas y similares. Quizás valide y quizás funcione en navegadores comunes. Estoy seguro de que hay algunos casos marginales que causan problemas y el beneficio parece pequeño. - billy luna

@Fricker porque es posible que no estén haciendo clic. Pueden estar controlando por voz, tocando o navegando de alguna manera desconocida. Es una pauta de accesibilidad para seguir los estándares para los controles, como usar el atributo A de HTML estándar para el enlace, y pensar en él y comunicarlo como un enlace, y no prescribir cómo alguien debe interactuar con él. Además, tener click here en un enlace no se recomienda, ya que será más difícil navegar por el lector de pantalla. Los enlaces deben estar en texto que describa el destino, para que el usuario sepa a dónde llegará antes de seguirlo y cómo interactuará con él. - billy luna

@BillyMoon, en realidad, el significado de "clic" ya se ha sobrecargado para incluir todos esos significados también. "clic" funcionará bien. - marcapasos

@BillyMoon ¿En qué circunstancias ocasionales el navegador ignora la meta actualización de valor 0? ¡Gracias! - gal margalit

JavaScript

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

Etiqueta meta

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

respondido 20 mar '19, 22:03

Lo haría Además, agregue un enlace canónico para ayudar a su SEO gente:

<link rel="canonical" href="http://www.example.com/product.php?item=swedish-fish"/>

Respondido el 25 de junio de 16 a las 20:06

¿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 un redireccionamiento en lugar de un enlace canónico. - LarsH

@larsH Entonces, ¿qué es lo más importante para el SEO, es el enlace de redireccionamiento o la página de destino final? - Chakotay

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

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

Reemplace segundos con la cantidad de segundos que debe esperar antes de que se redireccione y reemplace la URL con la URL a la que desea que se redirija.

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

window.location = "URL"

Respondido el 30 de Septiembre de 15 a las 20:09

Esta es una suma de todas las respuestas anteriores más una solución adicional usando HTTP Refresh Header a través de .htaccess

1. Encabezado de actualización HTTP

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

Header set Refresh "3"

Este es el equivalente "estático" de usar el header() Funcionar en PHP

header("refresh: 3;");

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

2. JavaScript

Con un suplente Enlance:

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

Sin una URL alternativa:

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

A través de jQuery:

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

3. Meta actualización

Puede utilizar la actualización de meta cuando las dependencias de 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">

Usar <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 se le redirige automáticamente: <a href='http://example.com/alternat_url.html'>Click here</a>

Recursos

Respondido 11 Jul 18, 09:07

Su ejemplo de "Via jQuery" no usa ningún jQuery. - Justin Johnson

No llames setTimeout con una cuerda. En su lugar, pase una función. - Oriol

"HTTP Refresh Header via .htaccess": ¿por qué es relevante en la pregunta sobre el redireccionamiento desde una página HTML? - reduciendo la actividad

Si desea seguir los estándares web modernos, debe evitar los meta redireccionamientos HTML sin formato. Si no puede crear código del lado del servidor, debe elegir Redireccionamiento de JavaScript preferiblemente.

Para admitir navegadores con JavaScript deshabilitado, agregue una línea de meta redirección HTML a un noscript elemento. La noscript meta redireccionamiento anidado combinado con el canonical La etiqueta también ayudará a su posicionamiento en los motores de búsqueda.

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

Un lado del cliente adecuado Redireccionamiento de URL El código 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 -->

Respondido 11 Jul 18, 22:07

w3.org/TR/WCAG10-HTML-TECHS/#meta-element incluye detalles sobre por qué <meta http-equiv="refresh" está en desuso por el W3C. - daxelrod

Los argumentos que proporciona w3c contra los redireccionamientos HTML también se aplican a los redireccionamientos de Javascript. Además, los redireccionamientos de Javascript requieren Javascript habilitado, a diferencia de los redireccionamientos de HTML. Por lo tanto, los redireccionamientos HTML son estrictamente mejores que los redireccionamientos Javascript en los casos en los que se pueden usar ambos. - Max

Sería mejor configurar un Redirigir 301. Consulte el artículo de Herramientas para webmasters de Google. Redireccionamientos de 301.

Respondido 26 Feb 15, 12:02

La pregunta solicita específicamente una página .html básica. Supongo que el autor de la pregunta no puede modificar .htaccess o similar (por ejemplo, usando Github Pages o un alojamiento limitado similar). 301 no es factible en tales casos - Nicolás Raúl

Puedes usar un META "redireccionar":

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

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

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

Pero prefiero recomendar usar mod_rewrite, si tiene la opción.

respondido 02 mar '13, 23:03

mod_rewrite (solo) se aplica a Apache. - Paul Draper

Con respecto a Apache: ¿Por qué mod_rewrite y no una simple directiva Redirect sin un módulo adicional? - vog

Tan pronto como se cargue la página, init se activa la funció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>

Respondido el 25 de junio de 16 a las 20:06

Coloque el siguiente código entre el y etiquetas 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. La content="0; puede cambiarse a la cantidad de segundos que desea que el navegador espere antes de redirigir.

contestado el 19 de mayo de 18 a las 18:05

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

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

Respondido 19 Abr '13, 19:04

Encontré un problema mientras trabajaba con un jQuery móvil aplicación, 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 en complejidad). Encontré que la solución más fácil en este caso fue colocar 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í.

Respondido el 25 de junio de 16 a las 20:06

La forma sencilla que funciona para todo tipo de páginas es simplemente agregar un meta etiqueta 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>

Respondido el 03 de Septiembre de 14 a las 16:09

Puede redireccionar 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");
?>

Respondido el 26 de enero de 18 a las 09:01

Eso no es un redireccionamiento desde una página HTML. - bugmenot123

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

<html>
  <head>
    <title>index.html</title>
  </head>
  <body onload="document.getElementById('lnkhome').click();">
    <a href="/es/Pages/Login.aspx" id="lnkhome">Go to Login Page<a>
  </body>
</html>

Respondido 24 ago 19, 10:08

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 por index.html en la raíz del sitio web. no es necesario que conozca su nombre de dominio. pero cuando estableces window.location.href = "xxx"; debe conocer el nombre de dominio. - Zolfaghari

Debería utilizar JavaScript. Coloque el siguiente código en las etiquetas de su cabeza:

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

respondido 13 nov., 13:22

Solo por si acaso:

<?php
header("Location: example@example.com", TRUE, 303);
exit;
?>

Asegúrese de que no haya eco sobre el script, de lo contrario se ignorará. http://php.net/manual/en/function.header.php

respondido 28 nov., 13:13

La pregunta solicita específicamente una página .html básica. Supongo que el autor de la pregunta no puede modificar .htaccess o similar (por ejemplo, usando Github Pages o un alojamiento limitado de manera similar). PHP no está disponible en tales casos. - Nicolás Raúl

Consideraría algo generado por PHP (Procesador de pre-hipertexto) una "página HTML básica". En ninguna parte de la pregunta se menciona un tipo de archivo. - Edward

Simplemente use el evento onload de la etiqueta del cuerpo:

<body onload="window.location = 'http://example.com/'">

contestado el 19 de mayo de 18 a las 18:05

Solo una nota, esto solo funcionará si javascript está habilitado, si necesita clientes de soporte sin javascript, use el meta método de etiqueta en su lugar - andy braham

Motor de maquinilla de afeitar por un retraso de 5 segundos:

<meta http-equiv="Refresh"
         content="5; url=@Url.Action("Search", "Home", new { id = @Model.UniqueKey }))">

Respondido el 25 de junio de 16 a las 20:06

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

Respondido 10 Jul 17, 03:07

No necesita ningún código JavaScript para esto. Escribe esto en el <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 en 0 segundos, puede ir a su página.

contestado el 21 de mayo de 17 a las 12:05

esto ya está cubierto en la respuesta aceptada y los comentarios principales; considere editar la respuesta que publicar una duplicada - RozzA

Por lo que los entiendo, todos los métodos que he visto hasta ahora para esta pregunta parecen agregar la ubicación anterior al historial. Para redirigir la página, pero no tengo la ubicación anterior en el historial, utilizo el replace método:

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

contestado el 19 de mayo de 18 a las 18:05

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

Este fragmento tiene varias 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 de sitios antiguos y nuevos
  • muestra una cuenta regresiva configurable
  • se puede utilizar para redireccionamientos de enlaces profundos, ya que conserva los parámetros

Modo de empleo:

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

Ahora vaya a la etiqueta de secuencia de comandos de apertura y edite las direcciones web del sitio antiguo y del sitio nuevo, y cambie el valor de los segundos según sea necesario.

Guarde y comience su sitio web. Trabajo hecho - tiempo para 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>

respondido 19 mar '18, 12:03

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

contestado el 22 de mayo de 20 a las 22:05

Puedes hacerlo en javascript:

location = "url";

Respondido 27 Oct 20, 15:10

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.