Coding-Schatzkästlein
Kleine Tips & Scripts zum Webdesign
Start > HTML > Seitenweiterleitung

HTML: Automatische Seitenweiterleitung (verfolgbare Adressänderung)

Zusammenfassung

Name:  Seitenweiterleitung (Client)
Aufgabe:  Maximal kompatible & komfortable Weiterleitung des Surfers zum neuen URL einer umgezogenen Webseite mittels Client-Technik.
Benötigt:  -
Beispiel:  -
Download:  umlenker.zip

Eine der wichtigsten Aufgaben des Web-Designs ist die nachhaltige Anlage der Website-Struktur. D.h., der Web-Designer muß sich bei der Planung genau überlegen, wie er die Site so strukturiert, daß sowohl der Surfer, als auch der Site-Betreiber, als auch natürlich er selbst sich gut zurechtfindet. Diese Struktur sollte nicht nur möglichst selbsterklärend, sie sollte auch für zukünftige Erweiterungen geeignet sein.

Trotzdem kann es natürlich immer mal wieder vorkommen, daß eine Seite "umzieht", also unter einem neuen URL erreichbar ist. Dann sollte eine Weiterleitung existieren, damit Surfer und Suchmaschinen die Seite mit neuem URL problemlos finden.

Je nach Fähigkeit des Browsers und Angebot des Providers kann man dies auf verschiedene Arten erreichen:

  1. Der HTML-Autor hat keinen Zugriff auf den Server (z.B. bei einem Freespace-Provider/Provider mit einem preiswerten Hosting-Paket), so daß eine clientseitige Technik verwendet werden muß:
    • Manuelle Weiterleitung mit einem Link (HTML)
    • Automatische Weiterleitung mit
      • META-Refresh (HTML)
      • location.href (JavaScript 1.0)
      • location.replace() (JavaScript 1.1)
  2. Der HTML-Autor hat (bedingten oder vollen) Zugriff auf die Fähigkeiten des Servers und kann bereits serverseitig automatisch weiterleiten mit
    • einem Serverscript (PHP, Perl, ...)
    • dem Apache URL rewriting module (Apache-Webserver)

Hier wird erläutert, wie der HTML-Autor die clientseitigen Techniken einsetzen kann (zu bevorzugen ist allerdings möglichst die Automatische Seitenweiterleitung (serverseitig)). Die Basis bildet dabei natürlich der klassische HTML-Link, dem der Surfer durch Mausklick, bzw. die Suchmaschine automatisch folgen kann:

<center>
<h3>Adresse ge&auml;ndert!</h3>
<h3>Zur neuen <a href="neu.htm">Seite</a> ...</h3>
</center>

Als 2. Stufe greift der META-Refresh. META-Tags sind besondere Anweisungen im Kopf einer HTML-Datei, die den Browser, analog zu Anweisungen durch den Server, zu einer bestimmten Verhaltensweise veranlassen können.

<meta http-equiv="refresh" content="2; url=neu.htm">

Hier soll der Browser das Äquivalent zur Protokollanweisung "refresh" ausführen, also nach 2 Sekunden den URL "neu.htm" laden. Die kurze Wartezeit verhindert, daß der Surfer beim Zurückblättern mittels Browser-Back-Button an dieser Anweisung hängenbleibt. Allerdings wird der META-Refresh nicht von jedem Browser ausgeführt, bzw. bei manchen Browsern kann er vom Surfer sogar gezielt ausgeschaltet werden.

Die 3. Stufe ist eine Weiterleitung mit der JavaScript-Eigenschaft location.href und entspricht in der Funktionalität dem META-Refresh.

<script type="text/javascript" language="JavaScript"><!--
 neuerURL="neu.htm"; function next(){window.location.href=neuerURL;}
 window.setTimeout("next()",1000);
//--></script>

Auch hier wird die eigentliche Weiterleitung erst nach einer kurzen Wartezeit gestartet (nach 1000 Millisekunden), um dem Surfer das Zurückblättern zu ermöglichen.

Die 4. Stufe ist die Weiterleitung mit der JavaScript-Methode location.replace(). Sie ist zwar erst ab JavaScript 1.1 vorhanden (und natürlich kann es sein, daß der Browser JavaScript gar nicht beherrscht, bzw. daß es abgeschaltet ist), hat aber einen gravierenden Vorteil: Die neue Seite wird nicht einfach geladen, sondern sie ersetzt die "Umlenkungs-Seite", die danach nicht mehr im Verlauf des Browsers existiert (weswegen diese Anweisung auch sofort, also ohne Wartezeit ausgeführt werden kann). Und: Da die "Umlenkungs-Seite" nicht mehr existiert, wird dem Surfer ein komfortables Blättern in den besuchten Seiten ermöglicht.

<script type="text/javascript" language="JavaScript"><!--
 xJS=false; neuerURL="neu.htm";
//--></script>
<script type="text/javascript" language="JavaScript" src="scripts.js">
</script><script type="text/javascript" language="JavaScript"><!--
 if(xJS){window.location.replace(neuerURL);}
//--></script>

Das externe JavaScript scripts.js muß hierbei wenigstens die Anweisung xJS=true; enthalten, damit location.replace() ausgeführt wird (Browser mit JavaScript Version 1.0 führen das externe Script nicht aus). Benutzt die Website ohnehin (mindestens) ein externes Script, so kann man dieses verwenden - es steht dann beim Start der neuen Seite dieser sofort zur Verfügung. Die Alternative wäre, die Weiterleitung selbst in das externe Script auszulagern, und dieses einfach einzubinden:

<script type="text/javascript" language="JavaScript"><!--
 neuerURL="neu.htm";
//--></script>
<script type="text/javascript" language="JavaScript" src="umlenker.js"></script>

Da der HTML-Autor sich nicht auf die Fähigkeiten des Browsers (oder der Suchmaschine) verlassen kann, sollte er alle Techniken für maximale Kompatibilität und maximalen Komfort kombinieren! Dazu muß der neue URL dreimal eingetragen werden (META-Refresh, JavaScript & HTML-Link)! Üblicherweise (aktueller Browser mit JavaScript) hat er dann eine schnelle, automatische Weiterleitung ohne störende Nebenwirkung (location.replace()). Alternativ weniger elegante automatische Weiterleitungen, bis hin zur manuellen Aufforderung. Außerdem ist es natürlich empfehlenswert, Suchmaschinen mit einer "Robot-Anweisung" zu veranlassen, die alte Seite aus ihrem Index zu entfernen, aber dem Link zur neuen Seite zu folgen (um dann diese zu indizieren).

HTML-Code

ZIP-Archiv mit allen Dateien.

Siehe hierzu auch: Automatische Seitenweiterleitung (serverseitig)

Kurz-URL dieses Artikels: http://Coding.binon.net/CUmlenker