Cómo redirigir una página HTML a otra durante la carga

9 minutos de lectura

avatar de usuario de chobo
chobo

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

  • Utilice .htaccess o el equivalente de IIS 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.

    – volar

    13 de noviembre de 2017 a las 11:29

  • Esa herramienta insider.zone hizo que mis redireccionamientos fueran en minúsculas, lo que provocó errores 404. Además, no hay forma de contactar a quien hizo la página al respecto.

    – Dan Jacobson

    23 de enero de 2019 a las 7:42


Avatar de usuario de Valerij
Valerij

Intenta usar:

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

Nota: Colóquelo en el <head> sección.

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

redirigir

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

  • El World Wide Web Consortium (W3C) desaconseja el uso de la actualización meta. Árbitro: en.wikipedia.org/wiki/Meta_refresh. Por lo tanto, se recomienda utilizar la redirección del servidor en su lugar. Es posible que las redirecciones de JavaScript no funcionen en todos los teléfonos móviles, ya que JavaScript podría estar deshabilitado.

    – Noveno Sentido

    30 de julio de 2012 a las 6:14

  • para su información, 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

    11/09/2013 a las 20:34

  • @Paul Draper, eso depende del servidor que esté ejecutando

    – Gal Margalit

    5 de octubre de 2013 a las 10:48

  • Agregué la etiqueta de cierre para respetar las especificaciones XHTML5.

    – Jaime

    31 de octubre de 2013 a las 12:48

  • 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.

    – Drusa

    28 de diciembre de 2013 a las 19:47


Avatar de usuario de Billy Moon
billy luna

Yo 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 de servidor, así que envíe un 301 código de estado. Esto es fácil de hacer a través de .htaccess archivos usando apacheo a través de numerosos complementos usando WordPress. Estoy seguro de que también hay complementos para todos los principales sistemas de administración de contenido. Además, cPanel tiene una configuración muy fácil para redireccionamientos 301 si lo tiene instalado en su servidor.

  • Esta página de redirección puede ser mucho más concisa con HTML5: pastebin.com/2qmfUZMk (que funciona en todos los navegadores y pasa la validación w3c)

    – enio

    29 de abril de 2013 a las 13:28

  • @enyo No soy un gran fanático 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 en los que causa problemas y el beneficio parece pequeño.

    –Billy Luna

    29 de abril de 2013 a las 15:52

  • @Fricker porque es posible que no estén haciendo clic. Pueden estar controlando a través de la voz, tocando o navegando de alguna manera desconocida. Es una guía de accesibilidad 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, tener click here en un enlace no se recomienda, ya que el lector de pantalla será más difícil de navegar. 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 interactúe con él.

    –Billy Luna

    5 de febrero de 2014 a las 18:45

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

    – Pacerier

    21/10/2014 a las 10:45


  • @BillyMoon, ¿bajo qué circunstancias ocasionales el navegador ignora la meta actualización de valor 0? ¡Gracias!

    – Gal Margalit

    04/09/2015 a las 13:38

avatar de usuario de amit_g
amit_g

JavaScript

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

Metaetiqueta

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

  • No parece funcionar para una página HTML en la aplicación Angular. ¿Hay alguno para arreglarlo?

    – RedBottleSanitizer

    14 de febrero de 2022 a las 22:33

avatar de usuario de lrkwz
lrkwz

me gustarí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"/>

Avatar de usuario de RafaSashi
Rafa Sashi

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 configurar un encabezado de actualización como este

    Header set Refresh "3"
    

    Este es el equivalente “estático” de usar el 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 un suplente URL:

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

    Sin una URL alternativa:

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

    Utilizando el window objeto:

    <script>
        window.location.reload(true);
     </script>
    
  3. Meta actualización

    Puede usar la meta actualización cuando las dependencias en JavaScript y los encabezados de redirección 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">
    

    Usando <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 eres redirigido automáticamente: <a href="http://example.com/alternat_url.html">Click here</a>

Recursos

  • Su ejemplo “Via jQuery” no usa ningún jQuery.

    –Justin Johnson

    6 de noviembre de 2016 a las 7:32

  • No llames setTimeout con una cuerda Pase una función en su lugar.

    – Oriol

    28 de noviembre de 2016 a las 20:07

  • “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 la actividad

    11 de julio de 2018 a las 8:01

  • Si puede hacer una redirección desde los encabezados HTTP (como en .htaccess), entonces debe usar una redirección 301 o 302, no una actualización.

    – Simón Este

    7 de octubre de 2021 a las 6:13

Avatar de usuario de Paul
Pablo

Si desea seguir los estándares web modernos, debe evitar los metarredireccionamientos HTML simples. Si no puede crear código del lado del servidor, debe elegir Redirección de JavaScript en cambio.

Para admitir navegadores con JavaScript deshabilitado, agregue una línea de meta-redireccionamiento HTML a un noscript elemento. Él noscript meta redirección anidada combinada con la canonical La etiqueta también ayudará a su clasificación en los motores de búsqueda.

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

Un lado del cliente adecuado redirección de URL el código se ve así (con un Internet Explorer 8 y arreglo 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 -->

  • Su ejemplo “Via jQuery” no usa ningún jQuery.

    –Justin Johnson

    6 de noviembre de 2016 a las 7:32

  • No llames setTimeout con una cuerda Pase una función en su lugar.

    – Oriol

    28 de noviembre de 2016 a las 20:07

  • “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 la actividad

    11 de julio de 2018 a las 8:01

  • Si puede hacer una redirección desde los encabezados HTTP (como en .htaccess), entonces debe usar una redirección 301 o 302, no una actualización.

    – Simón Este

    7 de octubre de 2021 a las 6:13

Avatar de usuario de IS4
IS4

La siguiente metaetiqueta, colocada entre el interior del encabezado, le indicará al navegador que redirija:

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

Reemplace segundos con la cantidad de segundos que debe esperar antes de que se redirija, 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"

¿Ha sido útil esta solución?