Reindirizzamento da una pagina HTML

1580

È possibile impostare una pagina HTML di base per reindirizzare a un'altra pagina al caricamento?

html  redirect  xhtml  meta  html-head 
— chobo
fonte
28
Per seguire i moderni standard web e fornire funzionalità cross-browser, preferisco usare questo generatore di reindirizzamento
— Patartics Milán,
1
Utilizzare .htaccess o equivalente IIS per eseguire un reindirizzamento sul lato server. In questo modo, anche se la pagina fisica scompare, il reindirizzamento continuerà a funzionare.
— Flith,
1
insider.zone/tools/client-side-url-redirect-generator È un piccolo strumento utile che garantisce la compatibilità.
— mackycheese21
2
Quel tool insider.zone ha reso i miei reindirizzamenti tutti minuscoli, causando 404 secondi. Inoltre non c'è modo di contattare chiunque abbia creato la pagina al riguardo.
— Dan Jacobson,

Risposte:

2152

Prova a usare:

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

Nota: posizionalo nella sezione testa.

Inoltre, per i browser meno recenti, se aggiungi un collegamento rapido nel caso in cui non si aggiorni correttamente:

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

Apparirà come

Reindirizzare

Ciò ti consentirà comunque di arrivare dove stai andando con un clic aggiuntivo.

— Valerij
fonte
151
L'uso del meta refresh è scoraggiato dal World Wide Web Consortium (W3C). Rif: en.wikipedia.org/wiki/Meta_refresh . Pertanto si consiglia di utilizzare il reindirizzamento del server. I reindirizzamenti JavaScript potrebbero non funzionare su tutti i telefoni cellulari poiché JavaScript potrebbe essere disabilitato.
— NinethSense,
61
Cordiali saluti, il 0mezzo per aggiornare dopo 0 secondi. Potresti voler concedere all'utente un po 'più di tempo per sapere cosa sta succedendo.
— Dennis,
5
@Paul Draper, dipende dal server in uso
— Gal Margalit,
9
Ho aggiunto la chiusura del tag per rispettare le specifiche XHTML5.
— ZenLulz,
98
Il commento di @ NinethSense fa sembrare meta refresh un reindirizzamento JavaScript. Meta refresh non è JS e funzionerà comunque quando JS è disabilitato.
— Druska,
1104

Vorrei utilizzare entrambi meta , e il codice JavaScript e sarebbe avere un link per ogni evenienza.

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

Per completezza, penso che il modo migliore, se possibile, sia utilizzare i reindirizzamenti del server, quindi inviare un codice di stato 301 . Questo è facile da fare tramite .htaccessfile utilizzando Apache o tramite numerosi plug-in tramite WordPress . Sono sicuro che ci sono anche plugin per tutti i principali sistemi di gestione dei contenuti. Inoltre, cPanel ha una configurazione molto semplice per reindirizzamenti 301 se è installato sul server.

— Billy Moon
fonte
12
Questa pagina di reindirizzamento può essere molto più concisa con HTML5: pastebin.com/2qmfUZMk (che funziona in tutti i browser e supera la convalida del w3c)
— enyo,
9
@enyo Non sono un grande fan del rilascio di bodytag e simili. Forse si convalida e forse funziona nei browser comuni. Sono sicuro che ci sono alcuni casi marginali che causano problemi e il vantaggio sembra piccolo.
— Billy Moon,
9
@Fricker perché potrebbero non fare clic. Potrebbero controllare tramite la voce, toccando o navigando in un modo sconosciuto. È una linea guida sull'accessibilità per seguire gli standard per i controlli, come usare l'attributo HTML A standard per il collegamento e pensarlo, comunicarlo come un collegamento e non prescrivere come qualcuno deve interagire con esso. Inoltre, click herenon è consigliabile avere un collegamento, poiché lo screen reader sarà più difficile da navigare. I collegamenti dovrebbero essere sul testo che descrive la destinazione, in modo che l'utente sappia dove arriveranno prima di seguirla e comunque interagiranno con essa.
— Billy Moon,
2
@BillyMoon, In realtà il significato di "click" è già stato sovraccaricato per includere anche tutti quei significati. "click" andrà bene.
— Pacerier,
2
@BillyMoon in quali circostanze occasionali il browser ignora 0 valore meta refresh? Grazie!
— Gal Margalit,
125

JavaScript

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

Meta tag

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

Vorrei anche aggiungere un link canonico per aiutare le persone SEO :

<link rel="canonical" href="http://www.example.com/product.php?item=swedish-fish"/>
— lrkwz
fonte
3
Utilizzeresti un link canonico oltre a un reindirizzamento? en.wikipedia.org/wiki/Canonical_link_element afferma che Google preferisce l'uso di un reindirizzamento invece di un collegamento canonico.
— LarsH
1
@larsH Quindi, cosa più importante per la SEO è il link di reindirizzamento o la pagina di destinazione finale?
— Chakotay,
— Marc.2377
28

Il seguente meta tag, posizionato all'interno della testa, indicherà al browser di reindirizzare:

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

Sostituisci i secondi con il numero di secondi di attesa prima del reindirizzamento e sostituisci l'URL con l'URL che desideri reindirizzare.

In alternativa, puoi reindirizzare con JavaScript. Posizionalo all'interno di un tag di script in qualsiasi punto della pagina:

window.location = "URL"
— Peter Olson
fonte
28

Questo è un riepilogo di tutte le risposte precedenti più una soluzione aggiuntiva che utilizza HTTP Refresh Header tramite .htaccess

1. Intestazione di aggiornamento HTTP

Prima di tutto, puoi usare .htaccess per impostare un'intestazione di aggiornamento come questa

Header set Refresh "3"

Questo è l'equivalente "statico" dell'uso della header()funzione in PHP

header("refresh: 3;");

Questa soluzione non è supportata da tutti i browser.

2. JavaScript

Con un URL alternativo :

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

Senza un URL alternativo:

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

Tramite jQuery:

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

3. Meta Refresh

Puoi utilizzare il meta refresh quando le dipendenze da JavaScript e le intestazioni di reindirizzamento sono indesiderate

Con un URL alternativo:

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

Senza un URL alternativo:

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

Utilizzando <noscript>:

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

facoltativamente

Come raccomandato da Billy Moon, puoi fornire un link di aggiornamento nel caso qualcosa vada storto:

Se non vieni reindirizzato automaticamente: <a href='http://example.com/alternat_url.html'>Click here</a>

risorse

— RafaSashi
fonte
12
L'esempio "Via jQuery" non utilizza jQuery.
— Justin Johnson,
2
Non chiamare setTimeoutcon una stringa. Passa invece una funzione.
— Oriol,
"HTTP Refresh Header via .htaccess" - perché è rilevante nella domanda che chiede il reindirizzamento dalla pagina HTML?
— riduzione dell'attività
26

Sarebbe meglio impostare un reindirizzamento 301 . Consulta i reindirizzamenti dell'articolo 301 degli Strumenti per i Webmaster di Google .

— Alex K
fonte
13
La domanda richiede specificamente una pagina HTML di base. Immagino che chi asker non possa modificare .htaccess o simili (ad esempio usando Github Pages o hosting altrettanto limitato). In questi casi 301 non è fattibile
— Nicolas Raoul,
26

Se non vedi l'ora di seguire i moderni standard web, dovresti evitare i semplici reindirizzamenti HTML. Se non riesci a creare un codice lato server, devi scegliere invece il reindirizzamento JavaScript .

Per supportare i browser con disabilitazione JavaScript, aggiungere una linea di meta reindirizzamento HTML a un noscriptelemento. Il noscriptmeta reindirizzamento nidificato combinato con il canonicaltag aiuterà anche le classifiche dei motori di ricerca.

Se si desidera evitare loop di reindirizzamento, è necessario utilizzare la location.replace()funzione JavaScript.

Un codice di reindirizzamento URL sul lato client corretto è simile al seguente (con un Internet Explorer 8 e una correzione inferiore e senza indugio):

<!-- 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
fonte
2
w3.org/TR/WCAG10-HTML-TECHS/#meta-element include dettagli sul perché <meta http-equiv="refresh"è deprecato dal W3C.
— daxelrod,
Gli argomenti forniti da w3c contro i reindirizzamenti HTML si applicano anche ai reindirizzamenti Javascript. Inoltre, i reindirizzamenti Javascript richiedono javascript abilitato, a differenza dei reindirizzamenti HTML. Pertanto i reindirizzamenti HTML sono strettamente migliori dei reindirizzamenti Javascript nei casi in cui è possibile utilizzare entrambi.
— Max
17

È possibile utilizzare un "reindirizzamento" META :

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

o reindirizzamento JavaScript (tieni presente che non tutti gli utenti hanno JavaScript abilitato, quindi prepara sempre una soluzione di backup per loro)

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

Ma preferirei usare mod_rewrite , se hai l'opzione.

— Czechnology
fonte
5
mod_rewrite (solo) si applica ad Apache.
— Paul Draper,
1
Per quanto riguarda Apache: perché mod_rewrite e non una semplice direttiva Redirect senza e un modulo aggiuntivo?
— vog
14

Non appena la pagina viene caricata, la initfunzione viene attivata e la pagina viene reindirizzata:

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

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

Inserisci il seguente codice tra i tag <HEAD> e </HEAD> del tuo codice HTML:

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

Il codice di reindirizzamento HTML sopra riportato reindirizza istantaneamente i tuoi visitatori a un'altra pagina web. È content="0;possibile modificare il numero di secondi che il browser deve attendere prima di reindirizzare.

— Muhammad Saqib
fonte
9

Inserisci il seguente codice nella <head>sezione:

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

Ho riscontrato un problema mentre lavoravo con un'applicazione jQuery Mobile , in cui in alcuni casi il mio tag di intestazione Meta non riusciva a ottenere un reindirizzamento corretto (jQuery Mobile non legge automaticamente le intestazioni per ogni pagina, quindi inserire JavaScript è anche inefficace a meno che non venga inserito in complessità). Ho trovato la soluzione più semplice in questo caso era quella di inserire il reindirizzamento JavaScript direttamente nel corpo del documento, come segue:

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

Questo sembra funzionare in ogni caso per me.

— scozzese
fonte
8

Il modo semplice che funziona per tutti i tipi di pagine è solo quello di aggiungere un metatag in testa:

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

Dovresti usare JavaScript. Inserisci il seguente codice nei tag head:

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

È possibile reindirizzare automaticamente tramite il codice di stato HTTP 301 o 302.

Per PHP:

<?php
    Header("HTTP/1.1 301 Moved Permanently");
    Header("Location: http://www.redirect-url.com");
?>
— Vô Vị
fonte
6
Questo non è un reindirizzamento da una pagina HTML.
— bugmenot123,
7

Uso uno script che reindirizza l'utente da index.html all'URL relativo della pagina di accesso

<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
fonte
1
L'URL di reindirizzamento nel metodo sopra può essere relativo. ad esempio: si desidera reindirizzare alla pagina di accesso o qualsiasi pagina relativa da index.html nella radice del sito Web. non è necessario conoscere il tuo nome di dominio. ma quando imposti window.location.href = "xxx"; devi conoscere il nome di dominio.
— Zolfaghari,
6

Solo per buona misura:

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

Assicurati che non ci siano echi sopra lo script, altrimenti verrà ignorato. http://php.net/manual/en/function.header.php

— Edward
fonte
9
La domanda richiede specificamente una pagina HTML di base. Suppongo che Asker non possa modificare .htaccess o simili (ad esempio usando Github Pages o hosting altrettanto limitato). PHP non è disponibile in questi casi.
— Nicolas Raoul,
Considererei qualcosa generato da PHP (Pre-Hypertext Processor) una "pagina HTML di base". In nessun punto della domanda è stato menzionato un tipo di file.
— Edward,
6

Basta usare l'evento onload del body tag:

<body onload="window.location = 'http://example.com/'">
— pat capozzi
fonte
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
fonte
4

Non è necessario alcun codice JavaScript per questo. Scrivi questo nella <head>sezione della pagina HTML:

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

Non appena la pagina viene caricata a 0 secondi, puoi andare alla tua pagina.

— Yash Jain
fonte
1
questo è già trattato nella risposta accettata e nei commenti principali - considera la possibilità di modificare la risposta piuttosto che pubblicarne una duplicata
— RozzA
3

Per quanto li capisco, tutti i metodi che ho visto finora per questa domanda sembrano aggiungere la vecchia posizione alla storia. Per reindirizzare la pagina, ma non ho la vecchia posizione nella cronologia, utilizzo il replacemetodo:

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

Questa è una soluzione di reindirizzamento con tutto ciò che desideravo, ma che non riuscivo a trovare in un frammento pulito e pulito da tagliare e incollare.

Questo frammento presenta numerosi vantaggi:

  • ti consente di catturare e conservare tutti i parametri di querystring che la gente ha sul proprio URL
  • rende il collegamento non richiesto per evitare la memorizzazione nella cache indesiderata
  • ti consente di informare gli utenti sui nomi di siti vecchi e nuovi
  • mostra un conto alla rovescia impostabile
  • può essere utilizzato per reindirizzamenti deep-link come parametri di conservazione

Come usare:

Se è stato migrato un intero sito, sul vecchio server arrestare il sito originale e crearne un altro con questo file come file index.html predefinito nella cartella principale. Modifica le impostazioni del sito in modo che qualsiasi errore 404 venga reindirizzato a questa pagina index.html. Questo attira chiunque acceda al vecchio sito con un link in una pagina di livello inferiore ecc.

Ora vai al tag di script di apertura e modifica gli indirizzi web oldsite e newSite e modifica il valore dei secondi in base alle esigenze.

Salva e avvia il tuo sito Web. Lavoro fatto - tempo per un caffè.

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

— Vombato Vombato
fonte
1

Reindirizzare utilizzando JavaScript, <noscript>nel caso in cui JS sia disabilitato.

<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
fonte
0

Usa questo codice:

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

Si prega di prestare attenzione: inserirlo nel tag head.

— AmerllicA
fonte
Non so perché la mia risposta sia stata valutata due volte? funziona correttamente
— Amerllic,
La stessa soluzione pubblicata da te è già stata pubblicata da più utenti in precedenza.
— Rahul Shah,
0

Puoi usare questo

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

— mgcarpizo
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.