Framesetmanager

Teil 2 - Das Script in den Frameseiten

So könnte dein bisheriger Quellcode einer Frameseite aussehen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
Hier ist dein Seiteninhalt
</body>
</html>

Das Script

<script type="text/javascript">
<!--
function checkQuer() {
if (parent.deineVariable=="kjzg") deineVariable = "kjzg";
else location.href="http://www.friedels-home.de/index.html?" + location.pathname;
};
//-->
</script>

Natürlich kommt auch dieses Script in den Head der Html-Seite. Zur besseren Übersicht habe ich die Klammern farbig gemacht. So kann man leicht erkennen welche öffnenden Klammer zu welcher schließenden Klammer gehört.

Erklärung

Die beiden ersten und die beiden letzten Zeilen sind wieder die selben wie beim Script im Frameset. Sie werden jedes mal für den Anfang und das Ende eines Scriptbereichs gebraucht. Mit function checkQuer() beginnt die Definition einer Funktion namens checkQuer. Die grüne runde Klammer ist dazu da, um Parameter oder Variablen an die Funktion übergeben zu können. Da das in diesem Fall nicht gebraucht wird, bleibt die Klammer leer. Wenn diese Funktion aufgerufen wird, wird das ausgeführt was in der roten geschweiften Klammer steht. Zuerst muss mal geprüft werden ob das Erkennungszeichen deiner Seiten, die Variable deineVariable des Elternframesets den Wert "kjzg"enthält. Das passiert mit einer Fallunterscheidung mit if. Auf if folgt in der blauen runden Klammer die Bedingung die geprüft wird. Wenn sie erfüllt ist wird das ausgeführt, was dahinter folgt. Die Bedingung lautet parent. deineVariable=="kjzg". In JavaScript ist == ein Vergleichsoperator. Es wird geprüft, ob das was rechts steht und das was links steht gleich ist. parent ist das Eltern-Fensterobjekt. parent. deineVariable ist dann das Objekt deineVariable innerhalb von parent. Wenn du die Variable deineVariable im Frameset also anders genannt hast, musst du den Namen auch hier entsprechend anpassen. Das selbe gilt natürlich für dessen Wert "kjzg". Bedingung ist genau dann erfüllt, wenn diese Seite in deinem Frameset ist. Wenn sie nicht in einem Frameset ist, oder im Frameset die Variable deineVariable nicht vorkommt, hat parent. deineVariable den Wert "". Und das ist verschieden zu "kjzg". Wenn deine Seite also da ist, wo sie hin gehört, wird die folgende Anweisung ausgeführt. Die Variable deineVariable erhält auch in dieser Seite den Wert "kjzg". Beachte, dass hier nur ein = ist. Hier wird nichts verglichen, sondern der rechte Wert wird der Variablen links zugewiesen. else kommt immer nur im Zusammenhang mit if vor. Was hinter else steht steht wird ausgeführt, wenn die Bedingung bei if nicht erfüllt ist - jetzt wird's spannend. Wenn die Seite also nicht da ist, wo sie hin gehört, wird dem Objekt location.href, also der Adresse dieses Fensterinhalts, der Wert "http://www.friedels-home.de/index.html?" + location.pathname zugewiesen. Dabei musst du http://www.friedels-home.de/index.html durch die URL deines Framesets ersetzen. Nach der URL des Framesets kommt ein ?und dann wird durch + location.pathname die URL der aktuellen Seite angehängt. Es gibt in JavaScript verschiedene Möglichkeiten Informationen außerhalb eines Dokuments zu speichern. Z.B. in einer Variablen in einem anderen Dokument, das gerade geöffnet ist, in einem Namen eines Objekts oder, wie hier in einer Adresse. Das besondere ist, dass der Browser das Fragezeichen und alles was dahinter kommt zwar speichert, aber nicht verarbeitet. Mit der Eigenschaft search des Objektes location kann später wieder ausgelesen werden, was hier übergeben wurde.

Funktionsaufruf

Dadurch, dass die Funktion definiert wurde, wird aber noch nichts bewirkt. Um die Funktion zu benutzen, muss sie erst aufgerufen werden. Durch das oben beschriebene Script erfährt der Browser was die Funktion checkQuer() ist. Sie soll beim Laden der Seite ausgeführt werden. Dazu ergänzt du das Bodytag deiner Seite um onLoad="checkQuer()". Wenn es vorher einfach nur <body> lautete, lautet es jetzt also <body onLoad="checkQuer()">.

Das klappt allerdings nicht, wenn du schon vorher den Eventhandler onLoad verwendet hattest. Angenommen dein Bodytag war vorher <body onLoad="egal_was">. Es ist nicht zulässig 2 mal den selben Eventhandler in einem Element zu verwenden. Deshalb musst du in diesem Fall im Head deines Dokuments noch eine Funktion definieren. Diese Funktion kann im selben Scriptbereich stehen, wie die Funktion checkQuer(). Du schreibst also zwischen die Zeilen <!-- und function checkQuer() { folgendes:

function zusatzFunktion() {
  checkQuer();
  egal_was;
};

Ins Bodytag schreibst du dann statt <body onLoad="egal_was"> einfach <body onLoad="zusatzFunktion()">. Beachte, dass die einzelnen Anweisungen innerhalb der Funktion mit Semikolons abgeschlossen werden müssen.

Ergebnis

Dein Quellcode der Frameseite sieht jetzt so aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function checkQuer() {
  if (parent.deineVariable=="kjzg") deineVariable = "kjzg";
  else location.href="http://www.friedels-home.de/index.html?" + location.pathname;
};
//-->
</script>
</head>
<body onLoad="checkQuer()">
Hier ist dein Seiteninhalt
</body>
</html>

Natürlich musst du alle deine Seiten entsprechend anpassen wenn sie die entsprechende Funktion haben sollen. Wenn einzelne Seiten nicht angepasst sind, funktionieren sie weiterhin wie bisher, auch wenn das Frameset den Framesetmanager enthält. Umgekehrt muss das Frameset aber angepasst sein sobald eine der enthaltenen Seiten den Framesetmanager enthält!

Weiter geht's mit dem 3. Teil.


Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: