Logo - 5.120 Bytes

Redirects / Weiterleitungen mit JavaScript

Über den Einsatz eines JavaScript Redirects scheiden sich die Geister. Einerseits ist diese clientseitige Weiterleitung sehr schnell und einfach realisierbar, anderseits setzt sie voraus, daß der Browser standardmäßig JavaScript unterstützt und JavaScript aktiviert ist.

Image, 7.33 KBEs gibt verschiedene Varianten, auf eine Webseite mittels JavaScript weiterzuleiten.

Wir sind im Laufe der Jahre zur Ansicht gelangt, daß JavaScript-Redirects, egal mit welcher JavaScript-Funktion sie ausgeführt werden, immer eine äußerst wackelige Angelegenheit sind, sofern man die Umgebungsvariablen des ausführenden Webbrowsers nicht genau kennt.

Einige Useragents sind zudem nicht die, die sie vorgeben zu sein. So kann es ohne weiteres sein, daß sich ein Robot einer Suchmaschine oder ein Meta-Spider als Internet Explorer ausgibt und kein JavaScript ausführen kann, während ein anderer, echter Internet Explorer - zum Beispiel der eines Moderators - den JavaScript Redirect ausführt.

Das Ergebnis der gespiderten Inhalte kann somit also von dem real betrachteten Inhalten variieren und als Cloaking eingestuft werden und die Webseiten möglicher Weise aus dem Index der Suchmaschine fliegen. Zudem gibt es „versierte” Anwender, die auf JavaScript Weiterleitungen allergisch reagieren oder den Useragent manipulieren - z.B. manche Opera-User (-;.

Man macht sich also sehr schnell nicht unbedingt nur Freunde. JavaScript-Weiterleitungen machen im Zusammenhang mit Suchmaschinenoptimierung eigentlich keinen Sinn, haben aber im Bereich der Interface-Programmierung besonders bei Backends von Content Management Systemen durchaus ihre Berechtigung.

Redirect mit JavaScript window.location.href

Über die Eigenschaft des Objektes location, das in der JavaScript-Objekthierarchie unterhalb des window Objektes liegt, haben Sie Kontrolle und auch Zugriff auf den vollständigen URL der aktuell angezeigten Seite. Sie können ein kleines Script schreiben und zu einem anderen URL weiterleiten.

Beispiele:

Hier einige Beispiele für JavaScript-Weiterleitungen, die dazu führen, daß der Web-Browser genau wie bei einem Verweis einen Sprung zum neuen URL automatisch ausführt.

<script type="text/javascript">
<!--
window.location = "http://www.andereseite.com/";
//–>
</script>

<script type="text/javascript">
<!--
window.location.href = "http://www.andereseite.com/";
//–>
</script>

<script type="text/javascript">
<!--
window.document.location.href = "http://www.andereseite.com/";
//–>
</script>

<script type="text/javascript">
<!--
document.location.href = "http://www.andereseite.com/";
//–>
</script>

Alternativ dazu können Sie auch die nachfolgende Methode replace() des Objektes window.location anwenden.

Redirect mit JavaScript window.location.replace()

Eine sehr wichtige, nützliche und gefährliche Funktion. Sie lädt einen neuen URL über den aktuellen Eintrag in der Liste der besuchten Seiten (History) - ersetzt die zuletzt aufgerufene Seite quasi durch eine Neue.

Beispiel:

<script type="text/javascript">
<!--
window.location.replace("http://www.server.de");
/* Varianten */
/* window.document.location.replace("http://www.server.de"); */
/* document.location.replace("http://www.server.de"); */
//–>
</script>
Es hat dadurch einen ähnlichen Effekt wie die Eigenschaft "href", der Unterschied ist jedoch, daß das Objekt "history" zerstört wird. So wird es nicht mehr möglich sein, über den Zurück-Button im Browser zur ursprünglichen Seite zurückzukehren.

Verzögerter JavaScript-Redirect mit setTimeout()

Die Funktion setTimeout() führt eine Anweisung nach einer bestimmten Verzögerungszeit aus.

Sie erwartet zwei Parameter:

  • Eine JavaScript-Anweisung, die verzögert ausgeführt werden soll
  • Die Zeit in Millisekunden bis zur Ausführung

Beispiel 1:

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JavaScript Redirect function setTimeout()</title>
</head>
<body>
<script language="javascript" type="text/javascript">
<!--
window.setTimeout('window.location = "http://www.ihre-seite.de"',2000);
// –>
</script>
</body>
</html>

Beispiel 2:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript">
<!--
function delayer(){
window.location = "../neue-seite.php";
}
//–>
</script>
</head>
<body onLoad="setTimeout('delayer()',5000)">;
<h1>Sie werden umgeleitet!</h1>
<p>Bitte aktualisieren Sie Ihre Bookmarks zu unserer neuen Adresse!</p>
</body>
</html>

Beispiel 3:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JavaScript Redirect function setTimeout()</title>
</head>
<body>
<script type="text/javascript">
<!--
redirectTime = "1500";
redirectURL = "http://www.ihre-seite.de";
function timedRedirect(){
setTimeout("window.location = redirectURL",redirectTime);
}
// –>
</script>
<h1 onclick="JavaScript:timedRedirect()">Weiter… </h1>
</body>
</html>

Zusamenfassung

Die Varianten des Redirects mit einer Zeitverzögerung sollten verwendet werden wenn:

  • nach einer bestimmten Zeit nach dem Aufruf einer Seite auf eine andere Seite gewechselt werden soll,
  • der Inhalt der Webseite sich in bestimmten Abständen aktualisieren sollte (z.B. Voting-Listen, Chat-Beiträge),
  • bei Downloadseiten, die einige Sekunden Zeit benötigen, bevor die Loading Page geladen wird und der Download startet,
  • die ursprüngliche Seite nicht mehr aktuell ist und Sie zusätzlich eine Meldung wie „Update your bookmark” einblenden möchten.

Serverseitige Redirects

Nach dem wir nun an dieser Stelle die clientseitigen Weiterleitungen mit HTML-Meta-Refreshs oder JavaScript abgehandelt haben, kommen wir im nächsten Kapitel zu den » serverseitigen Redirect-Methoden mit PHP, Perl, ASP etc …

5. Februar 2008 - 15:57 | Webprogrammierung » Redirect & Suchmaschinen | | Codecasters
websmith® – Webdesign, Webhosting & Internetmarketing aus Rosenheim – © 2015 Codecasters GmbH