☯ Weiterleitung auf Client-Seite

Tips für Web-Profis (Designer & HTML-Autoren)

Webseiten-Weiterleitung

Weiterleitung durch den Webserver

Eine automatische Weiterleitung zu einer anderen Seite und/oder auf einen anderen Server sollte wenn möglich immer server-seitig installiert werden. Dazu konfiguriert man am Webserver einen sogenannten Redirect (englisch für Weitersenden oder Umschalten). Redirects ersparen die Übertragung von HTML-Ballast und sind sehr vielseitig. Die Details sind von der verwendeten Server-Software abhängig.

Als Editor ohne Zugriff auf die Server-Konfiguration kann man server-seitige Umleitungen hinbekommen, wenn der Webserver die Verwendung von .htaccess-Dateien unterstützt und der Administrator diese erlaubt. Die Einzelheiten hängen vom der verwendeten Server-Software ab und sind im Internet aber hinreichend dokumentiert, z.B. für den Apache HTTPD.

Sind .htaccess-Dateien nicht vorgesehen, kann man den Systemadministrator um einen Redirect bitten. Bei günstigen Web-Hosting-Paketen dürfte das aber zuviel verlangt sein. In dem Fall macht mal als Editor die Umleitung da, wo man praktisch zuhause ist: Im Browser.

Weiterleiten durch den Browser

Als Editor oder Designer ist man im Allgemeinen auf der Browser-Seite: Im Browser werden Design und Inhalt angezeigt und Anweisungen ausgeführt. Wir können den Browser so steuern, dass er eine andere Seite - sofort oder mit Zwischenstop - lädt.

Bei allen Erklärungen gehen wir von folgender Aufgabenstellung aus: Die Datei index.html soll weitergeleitet werden nach http://www.meinenserver.de/index.php.

Die meisten Erklärungen sind im HTML-Code der Beispiel-Lösungen als Kommentare untergebracht.

Normale (transparente) Weiterleitung

Maxime: 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.

Folgendes Trio hat sich hierfür bewährt:

Meta-Tag (Refresh)
Javascript-Weiterleitung
Manueller Link zum Anklicken

Dann könnte die Datei index.html wie folgt aussehen:

<html>
<head>
<title>Weiterleitung</title>

<!-- 1. Meta-Tag zur sofortigen Weiterleitung an den neuen URL -->
<!--
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.php">
</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.php';
  //-->
</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.php"
     title="Weiterleitung"
     >http://www.meinenserver.de/index.php</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 professionelle 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.php"
     title="Weiterleitung"
     >http://www.meinenserver.de/index.php</a>
</p>
</body>
</html>

Wer meinen obigen Rat verstanden hat, kann hier aufhören zu lesen.

Weiterleitung mit Verzögerung

Manche Website-Betreiber wollen unbedingt verzögerte automatische Weiterleitung einbauen. Das kann den Besucher einer solchen Seite durchaus nerven. Sehr gerne genommen wird dann auch der leidige Satz
„Sollten Sie nach 5 Sekunden nicht weitergeleitet werden, klicken Sie bitte hier.”
(Hat da jemand hier geschrieben?)

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 URL -->
<!--
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.php">
</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 url erhällt den URL der Zieladresse.
Die Variable delay erhällt hier den Wert 5, der
für die Wartezeit in Sekunden steht.
-->
<script type="text/javascript"><!--
  var url = "http://www.meinenserver.de/index.php";
  var delay = 5;
  var cmd = 'window.location.href = "' + url + '"';
  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.php"
     title="Weiterleitung"
     >http://www.meinenserver.de/index.php</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.