Von einer HTML-Seite umleiten

1579

Ist es möglich, eine einfache HTML-Seite einzurichten, um beim Laden auf eine andere Seite umzuleiten?

html redirect xhtml meta html-head Chobo
quelle
28
Um modernen Webstandards zu folgen und browserübergreifende Funktionen bereitzustellen, bevorzuge ich die Verwendung dieses fortschrittlichen Umleitungsgenerators
Patartics Milán,
1
Verwenden Sie .htaccess oder ein IIS-Äquivalent, um eine serverseitige Umleitung durchzuführen. Auf diese Weise funktioniert die Weiterleitung auch dann, wenn Ihre physische Seite verschwindet.
Flith
1
insider.zone/tools/client-side-url-redirect-generator Ist ein nettes kleines Tool, das Kompatibilität gewährleistet.
Mackycheese21
2
Dieses insider.zone-Tool hat meine Weiterleitungen in Kleinbuchstaben ausgeführt und 404s verursacht. Außerdem gibt es keine Möglichkeit, jemanden zu kontaktieren, der die Seite darüber erstellt hat.
Dan Jacobson

Antworten:

2150

Versuchen Sie es mit:

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

Hinweis: Legen Sie es in den Kopfbereich.

Zusätzlich für ältere Browser, wenn Sie einen Quicklink hinzufügen, falls dieser nicht korrekt aktualisiert wird:

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

Wird als angezeigt

Umleiten

Auf diese Weise können Sie mit einem zusätzlichen Klick immer noch dorthin gelangen, wo Sie hin möchten.

Valerij
quelle
151
Die Verwendung der Meta-Aktualisierung wird vom World Wide Web Consortium (W3C) nicht empfohlen. Ref: en.wikipedia.org/wiki/Meta_refresh . Es wird daher empfohlen, stattdessen die Serverumleitung zu verwenden. JavaScript-Weiterleitungen funktionieren möglicherweise nicht auf allen Mobiltelefonen, da JavaScript möglicherweise deaktiviert ist.
NinethSense
61
Zu Ihrer Information, das 0Mittel zum Aktualisieren nach 0 Sekunden. Möglicherweise möchten Sie dem Benutzer mehr Zeit geben, um zu wissen, was passiert.
Dennis
5
@ Paul Draper, das hängt von dem Server ab, den Sie ausführen
Gal Margalit
9
Ich habe den Tag-Verschluss hinzugefügt, um die XHTML5-Spezifikationen zu berücksichtigen.
ZenLulz
98
Der Kommentar von @ NinethSense lässt die Meta-Aktualisierung wie eine JavaScript-Weiterleitung erscheinen. Die Meta-Aktualisierung ist nicht JS und funktioniert auch dann, wenn JS deaktiviert ist.
Druska
1104

Ich würde sowohl Meta- als auch JavaScript-Code verwenden und für alle Fälle einen Link haben.

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

Der Vollständigkeit halber denke ich, dass der beste Weg, wenn möglich, die Verwendung von Serverumleitungen ist. Senden Sie daher einen 301- Statuscode. Dies ist einfach über .htaccessDateien mit Apache oder über zahlreiche Plugins mit WordPress zu tun . Ich bin sicher, dass es auch Plugins für alle wichtigen Content-Management-Systeme gibt. Außerdem bietet cPanel eine sehr einfache Konfiguration für 301-Weiterleitungen, wenn Sie diese auf Ihrem Server installiert haben.

Billy Moon
quelle
12
Diese Weiterleitungsseite kann mit HTML5 viel prägnanter sein: pastebin.com/2qmfUZMk (das in allen Browsern funktioniert und die w3c-Validierung besteht)
enyo
9
@enyo Ich bin kein großer Fan davon, bodyTags und ähnliches fallen zu lassen. Vielleicht validiert es und funktioniert vielleicht in gängigen Browsern. Ich bin sicher, dass es einige Randfälle gibt, die Probleme verursachen, und der Nutzen scheint gering zu sein.
Billy Moon
9
@Fricker, weil sie möglicherweise nicht klicken. Sie steuern möglicherweise über Sprache, tippen oder navigieren auf unbekannte Weise. Es ist eine Richtlinie zur Barrierefreiheit, Standards für Steuerelemente zu befolgen, z. B. das Standard-HTML-A-Attribut für Links zu verwenden, diese zu betrachten und als Link zu kommunizieren, und nicht vorzuschreiben, wie jemand damit interagieren muss. Es click herewird auch nicht empfohlen, einen Link zu verwenden, da der Bildschirmleser schwieriger zu navigieren ist. Links sollten sich in einem Text befinden, der das Ziel beschreibt, damit der Benutzer weiß, wo er ankommt, bevor er ihm folgt, und wie auch immer er mit ihm interagiert.
Billy Moon
2
@BillyMoon, Eigentlich wurde die Bedeutung von "Klick" bereits überladen, um auch all diese Bedeutungen einzuschließen. "Klick" reicht aus.
Pacerier
2
@BillyMoon Unter welchen Umständen ignoriert der Browser die Meta-Aktualisierung mit 0 Werten? Vielen Dank!
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
quelle
40

Ich würde auch einen kanonischen Link hinzufügen, um Ihren SEO- Leuten zu helfen :

<link rel="canonical" href="http://www.example.com/product.php?item=swedish-fish"/>
lrkwz
quelle
3
Sie würden zusätzlich zu einer Weiterleitung einen kanonischen Link verwenden? en.wikipedia.org/wiki/Canonical_link_element sagt, dass Google die Verwendung einer Weiterleitung anstelle eines kanonischen Links bevorzugt .
LarsH
1
@larsH Was ist für SEO am wichtigsten? Ist es der Weiterleitungslink oder die endgültige Zielseite?
Chakotay
@Chakotay Siehe: Wann sollten Sie Canonical vs. 301 Redirect wählen?
März 2377
28

Das folgende Meta-Tag, das sich zwischen dem Kopf befindet, weist den Browser an, umzuleiten:

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

Ersetzen Sie Sekunden durch die Anzahl der Sekunden, die gewartet werden muss, bevor sie umgeleitet werden, und ersetzen Sie die URL durch die URL, zu der sie umleiten soll.

Alternativ können Sie mit JavaScript umleiten. Platzieren Sie dies in einem Skript-Tag an einer beliebigen Stelle auf der Seite:

window.location = "URL"
Peter Olson
quelle
28

Dies ist eine Zusammenfassung aller vorherigen Antworten sowie eine zusätzliche Lösung, die den HTTP-Aktualisierungsheader über .htaccess verwendet

1. HTTP-Aktualisierungsheader

Zunächst können Sie mit .htaccess einen solchen Aktualisierungsheader festlegen

Header set Refresh "3"

Dies ist das "statische" Äquivalent zur Verwendung der header()Funktion in PHP

header("refresh: 3;");

Beachten Sie, dass diese Lösung nicht von jedem Browser unterstützt wird.

2. JavaScript

Mit einer alternativen URL :

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

Ohne alternative URL:

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

Über jQuery:

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

3. Meta Refresh

Sie können die Meta-Aktualisierung verwenden, wenn Abhängigkeiten von JavaScript und Umleitungsheadern unerwünscht sind

Mit einer alternativen URL:

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

Ohne alternative URL:

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

Verwenden von <noscript>:

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

Optional

Wie von Billy Moon empfohlen, können Sie einen Aktualisierungslink bereitstellen, falls etwas schief geht:

Wenn Sie nicht automatisch umgeleitet werden: <a href='http://example.com/alternat_url.html'>Click here</a>

Ressourcen

RafaSashi
quelle
12
Ihr Beispiel "Via jQuery" verwendet keine jQuery.
Justin Johnson
2
Rufen Sie nicht setTimeoutmit einer Zeichenfolge auf. Übergeben Sie stattdessen eine Funktion.
Oriol
"HTTP-Aktualisierungsheader über .htaccess" - warum ist es fraglich, nach einer Umleitung von einer HTML-Seite zu fragen?
Reduzierung der Aktivität
26

Es wäre besser, eine 301-Umleitung einzurichten . Weitere Informationen finden Sie im Artikel 301 zu den Webmaster-Tools von Google .

Alex K.
quelle
13
In der Frage wird speziell nach einer einfachen HTML-Seite gefragt. Ich denke, der Fragesteller kann .htaccess oder ähnliches nicht ändern (zum Beispiel mit Github Pages oder ähnlich eingeschränktem Hosting). 301 ist in solchen Fällen nicht machbar
Nicolas Raoul
26

Wenn Sie sich darauf freuen, modernen Webstandards zu folgen, sollten Sie einfache HTML-Meta-Weiterleitungen vermeiden. Wenn Sie keinen serverseitigen Code erstellen können, sollten Sie stattdessen JavaScript-Umleitung wählen .

Um JavaScript-deaktivierte Browser zu unterstützen, fügen Sie einem noscriptElement eine HTML-Metaumleitungszeile hinzu . Die noscriptverschachtelte Meta-Weiterleitung in Kombination mit dem canonicalTag hilft auch Ihren Suchmaschinen-Rankings.

Wenn Sie Umleitungsschleifen vermeiden möchten, sollten Sie die location.replace()JavaScript-Funktion verwenden.

Ein korrekter clientseitiger URL-Umleitungscode sieht folgendermaßen aus (mit einem Internet Explorer 8 und niedrigerem Fix und ohne Verzögerung):

<!-- 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
quelle
2
w3.org/TR/WCAG10-HTML-TECHS/#meta-element enthält Details dazu, warum <meta http-equiv="refresh"das W3C nicht mehr unterstützt.
Daxelrod
Die Argumente, die w3c für HTML-Weiterleitungen bereitstellt, gelten auch für Javascript-Weiterleitungen. Darüber hinaus muss für Javascript-Weiterleitungen im Gegensatz zu HTML-Weiterleitungen Javascript aktiviert sein. Daher sind HTML-Weiterleitungen in Fällen, in denen beide verwendet werden können, strikt besser als Javascript-Weiterleitungen.
Max
17

Sie könnten eine META "Weiterleitung" verwenden:

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

oder JavaScript- Umleitung (beachten Sie, dass nicht alle Benutzer JavaScript aktiviert haben, bereiten Sie daher immer eine Sicherungslösung für sie vor)

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

Aber ich würde lieber mod_rewrite empfehlen , wenn Sie die Option haben.

Tschechologie
quelle
5
mod_rewrite (nur) gilt für Apache.
Paul Draper
1
In Bezug auf Apache: Warum mod_rewrite und keine einfache Redirect-Direktive ohne und mit zusätzlichem Modul?
Vog
14

Sobald die Seite geladen ist, wird die initFunktion ausgelöst und die Seite umgeleitet:

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

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

Platzieren Sie den folgenden Code zwischen den Tags <HEAD> und </ HEAD> Ihres HTML-Codes:

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

Der obige HTML-Weiterleitungscode leitet Ihre Besucher sofort auf eine andere Webseite weiter. Dies content="0;kann auf die Anzahl der Sekunden geändert werden, die der Browser warten soll, bevor er umgeleitet wird.

Muhammad Saqib
quelle
9

Fügen Sie den folgenden Code in den <head>Abschnitt ein:

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

Bei der Arbeit mit einer jQuery Mobile- Anwendung ist ein Problem aufgetreten , bei dem in einigen Fällen mein Meta-Header-Tag eine Umleitung nicht ordnungsgemäß erreicht hat (jQuery Mobile liest Header nicht automatisch für jede Seite, sodass das Einfügen von JavaScript auch dann ineffektiv ist, wenn es nicht eingewickelt wird Komplexität). Ich fand die einfachste Lösung in diesem Fall, die JavaScript-Umleitung wie folgt direkt in den Hauptteil des Dokuments einzufügen:

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

Das scheint in jedem Fall für mich zu funktionieren.

Schotte
quelle
8

Die einfache Methode, die für alle Arten von Seiten funktioniert, besteht darin, ein metaTag in den Kopf einzufügen:

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

Sie sollten JavaScript verwenden. Fügen Sie den folgenden Code in Ihre Kopfmarken ein:

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

Sie können automatisch über den HTTP-Statuscode 301 oder 302 umleiten.

Für PHP:

<?php
    Header("HTTP/1.1 301 Moved Permanently");
    Header("Location: http://www.redirect-url.com");
?>
Vô Vị
quelle
6
Dies ist keine Weiterleitung von einer HTML-Seite.
Bugmenot123
7

Ich verwende ein Skript, das den Benutzer von index.html zur relativen URL der Anmeldeseite umleitet

<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
quelle
1
Die Umleitungs-URL in der obigen Methode kann relativ sein. Beispiel: Sie möchten über index.html im Stammverzeichnis der Website zur Anmeldeseite oder zu einer beliebigen relativen Seite umleiten. Sie müssen Ihren Domainnamen nicht kennen. aber wenn Sie window.location.href = "xxx" setzen; Sie müssen den Domainnamen kennen.
Zolfaghari
6

Nur für ein gutes Maß:

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

Stellen Sie sicher, dass sich über dem Skript keine Echos befinden, da diese sonst ignoriert werden. http://php.net/manual/en/function.header.php

Edward
quelle
9
In der Frage wird speziell nach einer einfachen HTML-Seite gefragt. Ich denke, der Fragesteller kann .htaccess oder ähnliches nicht ändern (zum Beispiel mit Github Pages oder ähnlich eingeschränktem Hosting). PHP ist in solchen Fällen nicht verfügbar.
Nicolas Raoul
Ich würde etwas, das von PHP (Pre-Hypertext Processor) generiert wurde, als "grundlegende HTML-Seite" betrachten. Nirgends in der Frage wurde ein Dateityp erwähnt.
Edward
6

Verwenden Sie einfach das Onload-Ereignis des Body-Tags:

<body onload="window.location = 'http://example.com/'">
pat capozzi
quelle
5

Rasiermotor für eine Verzögerung von 5 Sekunden:

<meta http-equiv="Refresh"
         content="5; [email protected]("Search", "Home", new { id = @Model.UniqueKey }))">
JoshYates1980
quelle
Dies ist keine Weiterleitung von einer HTML-Seite.
Reduzierung der Aktivität
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
quelle
4

Sie benötigen hierfür keinen JavaScript-Code. Schreiben Sie dies in den <head>Abschnitt der HTML-Seite:

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

Sobald die Seite nach 0 Sekunden geladen ist, können Sie zu Ihrer Seite wechseln.

Yash Jain
quelle
1
Dies ist bereits in der akzeptierten Antwort und den Top-Kommentaren behandelt - erwägen Sie, die Antwort zu bearbeiten, als eine doppelte zu veröffentlichen
RozzA
3

Soweit ich sie verstehe, scheinen alle Methoden, die ich bisher für diese Frage gesehen habe, den alten Ort in die Geschichte aufzunehmen. Um die Seite umzuleiten, aber nicht den alten Speicherort im Verlauf zu haben, verwende ich die folgende replaceMethode:

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

Dies ist eine Weiterleitungslösung mit allem, was ich wollte, aber nicht in einem schönen, sauberen Snippet zum Ausschneiden und Einfügen finden konnte.

Dieses Snippet hat eine Reihe von Vorteilen:

  • Mit dieser Option können Sie alle abfragenden Parameter abfangen und beibehalten, die die Benutzer in ihrer URL haben
  • macht den Link unqiue, um unerwünschtes Caching zu vermeiden
  • Mit dieser Option können Sie Benutzer über die alten und neuen Site-Namen informieren
  • zeigt einen einstellbaren Countdown
  • kann für Deep-Link-Weiterleitungen verwendet werden, da Parameter beibehalten werden

Wie benutzt man:

Wenn Sie eine gesamte Site migriert haben, stoppen Sie auf dem alten Server die ursprüngliche Site und erstellen Sie eine andere mit dieser Datei als Standarddatei index.html im Stammordner. Bearbeiten Sie die Site-Einstellungen so, dass alle 404-Fehler auf diese index.html-Seite umgeleitet werden. Dies fängt jeden auf, der auf die alte Site mit einem Link zu einer untergeordneten Seite usw. zugreift.

Gehen Sie nun zum Eröffnungsskript-Tag, bearbeiten Sie die Webadressen oldsite und newSite und ändern Sie den Sekundenwert nach Bedarf.

Speichern und starten Sie Ihre Website. Arbeit erledigt - Zeit für einen Kaffee.

<!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>
Erweitern Sie das Snippet

Besiegter Wombat
quelle
1

Umleiten mit JavaScript, <noscript>falls JS deaktiviert ist.

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

Verwenden Sie diesen Code:

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

Bitte beachten Sie: Stecken Sie es in die Kopfmarke.

AmerllicA
quelle
Ich weiß nicht, warum meine Antwort zweimal abgelehnt wurde. es funktioniert richtig
AmerllicA
Dieselbe von Ihnen veröffentlichte Lösung wurde bereits früher von mehreren Benutzern veröffentlicht.
Rahul Shah
0

Sie können es in Javascript tun:

location = "url";
GameMaster1928
quelle
0

Sie können dies verwenden

<meta http-equiv="refresh" content="0; url=http://newpage.com/" />
Erweitern Sie das Snippet

mgcarpizo
quelle