Tips für Web-Profis (Designer & HTML-Autoren)
Weiterleitung
Grundlegendes
Eine automatische Weiterleitung zu einer anderen Seite und/oder auf einen anderen Server sollte wenn möglich immer server-seitig installiert werden. Das erspart die Übertragung von HTML-Ballast, ist effizient und ist sehr flexibel.
Wenn der Hosting-Vertrag keine Änderungen an der Server-Konfiguration zulässt, bleibt nur die Umleitung auf Browser-Seite, denn was dort passiert, kann der Designer bestimmen. Dessen Vokabular, nämlich HTML und Javascript, sollte für eine hinreichend elegante und allgemeine Lösung reichen.
Die geplante Weiterleitung soll auf allen möglichen Anzeigegeräten mit jeder beliebigen Konfiguration funktionieren und für den Betrachter möglichst transparent (unbemerkt) bleiben. Dazu hat sich folgendes Trio bewährt:
Meta-Tag (Refresh)
Javascript-Weiterleitung
Manueller Link zum Anklicken
Sofortige Weiterleitung
Die Erklärung erfolgt am Beispiel. Nehmen wir an, wir wollen die Seite
index.html auf einen neuen URI weiterleiten, z.B. auf
http://www.meinenserver.de/index.html.
Dann könnte die Datei index.html wie folgt aussehen:
<html>
<head>
<title>Weiterleitung</title>
<!-- 1. Meta-Tag zur sofortigen Weiterleitung an den neuen URI -->
<!--
Dieses Meta-Tag verstehen die meisten Browser und es funktioniert auch,
wenn der Javascript ausgeschaltet oder vom Browser nicht unterstützt wird.
-->
<meta http-equiv="refresh"
content="0; url=http://www.meinenserver.de/index.html">
</head>
<body>
<!-- 2. Javascript-Weiterleitung -->
<!--
Falls das Meta-Tag vom Client ignoriert wurde, wird dem Client eine
Javascript-Weiterleitung angeboten. Dieser Javascript-Teil
ist übrigens so auskommentiert, dass er bei fehlender
Javascript-Unterstützung normalerweise einfach ignoriert
wird.
-->
<script type="text/javascript"><!--
window.location.href='http://www.meinenserver.de/index.html';
//-->
</script>
<!-- 3. Link zum manuellen Weiterklicken -->
<!--
Wenn der Client bisher nicht weitergeleitet wurde, d.h. weder
Meta-Tags noch Javascript unterstützt, wird das Folgende angezeigt --
vielleicht sogar die höflichste Art der Weiterleitung.
-->
<p>
Diese Seite befindet sich jetzt an einem anderen Ort:
</p>
<p>
<a href="http://www.meinenserver.de/index.html"
title="Weiterleitung"
>http://www.meinenserver.de/index.html</a>
</p>
</body>
</html>
Weiterleitung mit „Zwischen-Aufenthalt”
Manchmal will man aus Anstand dem weitergeleiteten Website-Besucher anzeigen, dass er weitergeleitet wird. Im Prinzip reicht dazu ein ganz normaler HTML-Link aus. Besucherinnen und Besucher der betroffenen Seite sind durchaus im Stande, diesen Link anzuklicken.
Damit sieht die professionellste Umleitung mit Zwischen-Information für mich dann so aus:
<html>
<head>
<title>Weiterleitung</title>
<!-- Hier CSS-Anweisungen etc. entsprechend dem Design der restlichen Seiten -->
</head>
<body>
<!-- Das ganze vom Design her an die anderen Seiten
des Web-Auftritts anpassen -->
<p>
Diese Seite befindet sich jetzt an einem anderen Ort:
</p>
<p>
<a href="http://www.meinenserver.de/index.html"
title="Weiterleitung"
>http://www.meinenserver.de/index.html</a>
</p>
</body>
</html>
Wer meinen obigen Rat verstanden hat, kann hier aufhören zu lesen.
Weiterleitung mit Verzögerung
Den meisten Webdesignern wird dies nicht ausreichen. Aus unerklärlichen
Gründen werden sie die Sache verkomplizieren wollen:
Sie wollen die Welt mit einer Verzögerung strafen und den leidigen Satz
loswerden:
„Sollten Sie nach 5 Sekunden nicht weitergeleitet werden, klicken
Sie bitte hier.”
(Hat da jemand hier
geschrieben?)
Beispiel: Wir wollen immer noch die Seite
index.html auf
http://www.meinenserver.de/index.html
weiterleiten.
Diesmal soll aber erst mal für 5 Sekunden ein Hinweis erscheinen.
Die Datei index.html könnte dann so aussehen:
<html>
<head>
<title>Weiterleitung</title>
<!-- Hier CSS-Anweisungen etc. wie auf anderen Seiten. -->
<!-- 1. Meta-Tag zur sofortigen Weiterleitung an den neuen URI -->
<!--
Die Zahl 5 im Content-Attribut des Tags steht hier für
5 Sekunden Wartezeit vor der Weiterleitung.
-->
<meta http-equiv="refresh"
content="5; url=http://www.meinenserver.de/index.html">
</head>
<!-- 2. Javascript-Weiterleitung -->
<!--
Wie oben: Falls das Meta-Tag ignoriert wurde, sieht der
Client folgende Javascript-Anweisung.
setTimeout() sorgt für eine Wartezeit vor der
Ausführung.
Die Variable uri erhällt den URI der Zieladresse.
Die Variable delay erhällt hier den Wert 5, der
für die Wartezeit in Sekunden steht.
-->
<script type="text/javascript"><!--
var uri = "http://www.meinenserver.de/index.html";
var delay = 5;
var cmd = 'window.location.href = "' + uri + '"';
setTimeout(cmd, delay*1000);
//-->
</script>
<!-- 3. Anweisung zur manuellen Weiterschaltung -->
<!--
Folgender Body wird für alle Browser 5 Sekunden lang
sichtbar sein. Daher sollte das Design auf jeden Fall zum
Rest des Website passen.
Wichtig ist auch der Link zum manuellen Weiterschalten,
falls weder das Meta-Tag noch Javascript unterstützt
werden.
-->
<body>
<p>
Sie werden von hier aus automatisch weitergeleitet zu:
</p>
<p>
<a href="http://www.meinenserver.de/index.html"
title="Weiterleitung"
>http://www.meinenserver.de/index.html</a>
</p>
<p>
Falls die Weiterleitung nicht automatisch erfolgt,
klicken Sie bitte obigen Link.
</body>
</html>
Weitere Details zum Refresh-Meta-Tag und zu den hier verwendeten Javascript-Anweisungen gibt es im Web bereits zu Hauf.