Das nun folgende Tutorial ist ein Auszug aus der 7. Auflage des Buches: JavaScript und Ajax von Christian Wenz.

Kapitel 10 Frames und Iframes

Das window-Objekt steht in der Objekthierarchie ganz oben. Dies ist verständlich, da alles, was man mit JavaScript anstellen kann, in irgendeiner Art von Fenster dargestellt wird. Wenn also eine Webseite aus mehreren Frames besteht, wird jeder dieser Frames wie ein Fenster behandelt, zumindest im Sinne von JavaScript. Sie sehen, es gibt viele verschiedene Anwendungen für dieses Objekt. Aus diesem Grund wird das Thema in drei Kapiteln behandelt.

In diesem Kapitel werden Sie erfahren, wie man mit JavaScript auf Frames zugreift und damit beispielsweise die Navigation flexibler gestalten kann. Außerdem wird Schritt für Schritt eine der JavaScript-Standard-anwendungen implementiert: eine Warenkorb-Lösung.

10.1 Mit Frames arbeiten 

Unter einem Frame versteht man einen Bereich im Browserfenster, der – genau wie das Browserfenster selbst – einen eigenen Scroll-Balken haben und unabhängig vom Rest der Webseite gescrollt werden kann. Frames tauchten das erste Mal im Netscape Navigator 2 auf und wurden sehr schnell von Webdesignern übernommen, erlaubten Frames doch eine bequeme Navigation. Viele Seiten bestanden zunächst aus zwei Frames: Der eine enthielt die Navigationspunkte, der zweite die eigentlichen Inhalte der Seite. Da sich die Navigation in dem Frame befand, musste sie nicht in die Seiten mit dem eigentlichen Inhalt mit eingeschlossen werden, was den Verwaltungsaufwand bei Änderungen verringerte (nur die Seite mit der Navigation musste angepasst werden, jedoch nicht jede einzelne Inhaltsseite). Der Internet Explorer übernahm Frames in der Version 3, und schon begannen die Webdesigner zu fluchen, da die Implementierung von Frames leicht unterschiedlich war (Stichwort: Abstand des Frame-Inhalts vom Frame-Rand). Mittlerweile geht der Trend wieder zu Seiten ohne Frames, auch in Hinblick auf Handhelds, deren eingeschränkte Browser oft mit Frames nichts anfangen können. Dennoch können Sie in Verbindung mit JavaScript mit Frames erstaunliche Dinge machen – Dinge, die ohne Frames nur mit Schwierigkeiten oder gar nicht realisiert werden könnten.

In Mode kommt allerdings eine spezielle Form von Frames, so genannte Iframes (in HTML: <iframe>-Element). Das sind Frames, die inmitten einer Seite liegen. Das gestattet beispielsweise, immer nur einen Teilbereich einer Seite zu aktualisieren, also ohne komplettes Neuladen einer Seite. Auch hier gilt wieder, dass Textbrowser und mobile Endgeräte Schwierigkeiten haben. Generell aber sind Iframes ein Spezialfall von Frames und werden deswegen nicht gesondert behandelt; die JavaScript-Ansteuerung ist identisch. Wenn im Folgenden von »Frames« die Rede ist, sind – wenn es um die Ansteuerung geht – immer auch Iframes gemeint.

Mit JavaScript ist es möglich, von einem Frame aus Methoden, Eigenschaften und Variablen eines anderen Frames aufzurufen. Im Folgenden erfahren Sie zunächst etwas über den strukturellen Aufbau von Frames, und dann, wie diese Strukturen in JavaScript nachgebildet worden sind.

10.1.1 Frames mit HTML  

Eine Frame-Struktur wird immer mit dem HTML-Tag <frameset> eingeleitet. Es wird genau einer der beiden folgenden Parameter erwartet:

rows: Die einzelnen Frames werden untereinander (in Zeilen, engl. rows) angeordnet.

cols: Die einzelnen Frames werden nebeneinander (in Spalten, engl. columns) angeordnet.

Als Wert für diesen Parameter werden – durch Kommata getrennt – die Höhen (bei rows) oder Breiten (bei cols) der einzelnen Frames erwartet. Dabei haben Sie die Wahl zwischen drei Optionen:

Angabe in Pixeln: Lediglich der numerische Wert wird angegeben.

Angabe in Prozent der Gesamthöhe/-breite des Fensters, das das <frameset> enthält.

»Rest«: Wird durch einen Stern (*) symbolisiert.

Diese Möglichkeiten können natürlich miteinander kombiniert werden. Da dieses Buch keine HTML-Einführung sein soll, folgen hier nur ein paar kurze Beispiele:

<frameset rows="100,200,300">: Drei Frames, die untereinander angeordnet sind. Im Idealfall hat der oberste Frame eine Höhe von 100 Pixeln, der mittlere eine Höhe von 200 Pixeln und der untere eine Höhe von 300 Pixeln. Das ist deswegen ein Idealfall, da das Browserfenster wahrscheinlich nicht exakt 600 Pixel hoch ist.

<frameset cols="100,50  %,*">: Drei Frames, die nebeneinander angeordnet sind. Der mittlere nimmt die halbe Breite ein, der linke ist exakt 100 Pixel breit, und der dritte Frame beansprucht die restliche Breite für sich. Sollte sich also die Breite des Browserfensters verändern, ändern gleichzeitig auch der mittlere und der rechte Frame ihre Breite, der linke Frame bleibt jedoch in der Größe konstant.

Mit <frameset> wird also die Frame-Struktur festgelegt – über die individuellen Inhalte der Frames wurde damit noch nichts ausgesagt. Hierfür ist das <frame>-Tag zuständig, das in seinem src-Attribut die URL des Dokuments enthält, das in dem entsprechenden Frame dargestellt werden soll.

Für jeden Frame muss – innerhalb der frameset-Struktur – entweder ein <frame>-Tag verwendet werden oder ein weiteres <frameset>-Tag. So können auch mehrere Framesets ineinander verschachtelt werden. In den nächsten Abschnitten wird die folgende Frame-Struktur als Vorbild verwendet:

<html>
<head><title>Frames</title></head>
<frameset cols="150,*">
  <frame name="A" src="a.html">
  <frameset rows="100,*">
    <frame name="B" src="b.html" />
    <frame name="C" src="c.html" />
  </frameset>
</frameset>
<noframes>
<body>Ihr Browser kann mit Frames nichts anfangen!
</body>
</noframes>
</html>

Abbildung 10.1     Die Beispielseite im Browser

Zur Erläuterung: Das Browserfenster wird zunächst vertikal in zwei Bereiche geteilt: Der linke Bereich wird mit der Datei a.html gefüllt, der rechte wird horizontal in zwei Frames geteilt, wovon der obere die Datei b.html und der untere die Datei c.html enthält. In Abbildung 8.1 sehen Sie, wie das Ganze im Browser aussieht.

10.1.2 Frames mit JavaScript füllen 

Kleines Quiz: Wie bekommt man eine leere Seite in einen Frame? Netscape-Veteranen erinnern sich vielleicht an die Abkürzung about:blank, die seit Version 1 eine leere Seite erzeugt. Mittlerweile haben sich alle anderen Browser daran orientiert und unterstützen about:blank ebenfalls.

Mit JavaScript ist es jedoch möglich, den Startinhalt eines Frames direkt in der Seite mit dem Frameset festzulegen. Das ist eigentlich gar nichts Neues. Sie wissen ja schon längst, wie man eine JavaScript-Funktion via URL aufrufen kann: mit dem JavaScript-Protokoll. Ganz nebenbei kann man damit auch noch andere Dinge erzeugen als eine leere Seite. Betrachten Sie folgendes Beispiel:

<html>
<head><title>Frames</title>
<script type="text/javascript"><!--
function tag(s) {
  return "<" + s + ">";
}
function leer() {
  var html = tag("html") + tag("body") + tag("/body")
  + tag("/html");
  return html;
}
function voll(s) {
  var html = tag("html") + tag("body");
  html += tag("h3") + s + tag("/h3");
  html += tag("/body") + tag("/html");
  return html;
}
//--></script>
</head>
<frameset cols="150,*">
   <frame name="A" src="javascript:top.voll('linker
   Frame')" />
   <frameset rows="100,*">
      <frame name="B" src="javascript:top.leer()" />
      <frame name="C" src="javascript:top.voll('rechts
      unten')" />
   </frameset>
</frameset>
<noframes>
<body>Ihr Browser kann mit Frames nichts anfangen!</body>
</noframes>
</html>

Abbildung 10.2     Mit JavaScript gefüllte Frames

Im Browser sieht diese Seite dann so ähnlich wie in Abbildung 10.2 aus, vorausgesetzt natürlich, Ihr Browser unterstützt JavaScript! Was übrigens das top. vor dem Funktionsnamen bedeutet, erfahren Sie ein paar Abschnitte später.

10.2 Auf Daten von Frames zugreifen 

Wie ich bereits erwähnt habe, werden Frames in JavaScript wie Fenster behandelt. Mit den Schlüsselwörtern this und self erhält man also eine Referenz auf den aktuellen Frame – oder eben auf das aktuelle Fenster, wenn die Seite keine Frames enthält.

Auf sich selbst zuzugreifen ist aber nicht sonderlich interessant, und erst recht nichts Neues. Viel eher ist es wichtig, wie man von einer Webseite aus auf die Unterframes zugreifen kann und wie man – von einem Frame aus – auf das in der Hierarchie eine Stufe über einem stehende Element zugreifen kann. Um das anhand eines praktischen Beispiels einmal durchzuführen, wird das Standardbeispiel für diesen Abschnitt leicht verändert.

Das Hauptdokument, es heißt in unserem Beispiel frameset.html, hat folgenden Aufbau:

<html>
<head><title>Frames</title></head>
<frameset cols="150,*">
   <frame name="A" src="a.html" />
   <frame name="B" src="f_b.html" />
</frameset>
<noframes>
<body>Ihr Browser kann mit Frames nichts anfangen!</body>
</noframes>
</html>

Die Datei f_b.html enthält wiederum ein Frameset:

<html>
<head><title>Noch mehr Frames</title></head>
<frameset rows="100,*">
   <frame name="C" src="c.html" />
   <frame name="D" src="d.html" />
</frameset>
</html>

Abbildung 10.3     Die Beispielseite im Browser

Abbildung 10.3 veranschaulicht noch einmal den Aufbau: Die Hauptseite enthält zwei Frames – links a.html und rechts f_b.html. Zusätzlich teilt sich f_b.html in die zwei Frames mit dem Inhalt c.html (oben) und d.html (unten) auf.

10.2.1 Auf übergeordnete Frames zugreifen  

Wenn Sie in HTML codieren wollen (von »programmieren« kann im Zusammenhang mit HTML ja keine Rede sein), dass sich das Ziel eines Links nicht im aktuellen Frame öffnet, sondern das gesamte Browserfenster für sich beansprucht, machen Sie das für gewöhnlich folgendermaßen:

<a href="seite.htm" _fcksavedurl="seite.htm" _fcksavedurl="seite.htm" _fcksavedurl="seite.htm" _fcksavedurl="seite.htm" target="_top">Hier klicken</a>

Bei JavaScript heißt das Schlüsselwort ganz ähnlich: top. Hiermit erhalten Sie eine Referenz auf das oberste Fenster in der gesamten Frame-Hierarchie. Egal, ob Sie sich in a.html, c.html oder gar in frameset.html befinden – top.location enthält immer "frameset.html" (sowie den Pfad zu dieser Datei).

Oft ist es jedoch von Nutzen, in der Hierarchie nur eine Stufe nach oben zu gelangen, also in unserem Beispiel etwa von c.html eine Referenz auf den Frame mit b.html zu erhalten. Das Schlüsselwort heißt hier parent (dt. »Elternteil«). Wenn Sie sich also in c.html befinden, enthält parent.location den Wert "b.html"; und von b.html aus betrachtet, enthält parent.location den Wert "frameset.html".

Mit parent erhält man bildlich betrachtet immer eine Referenz auf das Dokument, das in dem <frameset>-Tag enthalten ist, das den Frame mit der aufrufenden Datei enthält. Sind in einer Datei also mehrere Framesets ineinander verschachtelt, stehen diese dennoch in der Frame-Hierarchie auf einer Ebene.

Einige Seiten, die ihre Navigation mit Frames erledigen, stellen externe Links in einem ihrer Frames dar, so dass die eigene Navigation immer noch sichtbar bleibt, die fremde Website also in einem Unterframe einer anderen Website dargestellt wird. Das ist zum einen unfreundlich und zum anderen auch schon ein paar Mal erfolgreich von entnervten Sitebetreibern an- bzw. abgemahnt worden. Wenn Sie verhindern wollen, dass Ihre Seiten innerhalb eines fremden Framesets dargestellt werden, haben Sie die folgenden Möglichkeiten, die alle auf demselben Prinzip beruhen: Wenn wir uns nicht im obersten Frame in der Hierarchie befinden, dann machen wir uns zum obersten Frame in der Hierarchie!

<script type="text/javascript"><!--
if (self != top) {
   top.location = self.location;
}
//--></script>

oder:

<script type="text/javascript"><!--
if (self != parent) {
   top.location = self.location;
}
//--></script>

Bauen Sie dieses Skript in all Ihre Webseiten ein, und Sie werden nie wieder von fremden Framesets belästigt werden (wie üblich: sofern JavaScript aktiviert ist)!

Es gibt jedoch auch noch einen anderen Fall: Ein Besucher Ihrer Webseiten setzt ein Lesezeichen (Bookmark) auf eine Seite in einem Frame. Wenn er jedoch das Lesezeichen wieder aufruft, wird lediglich die eine Seite geladen, nicht jedoch die anderen Frames, die beispielsweise die gesamte Navigation enthalten.

Um das Ganze ein wenig anschaulicher zu machen, folgt hier eine Konkretisierung der Aufgabenstellung. Ihre Website besteht aus zwei Frames: Der linke enthält die Navigation, der rechte den Inhalt. Ihre index.html-Datei sieht folgendermaßen aus:

<html>
<head><title>Homepage mit Frames</title></head>
<frameset cols="150,*">
   <frame src="navigation.html" name="Navi" />
   <frame src="inhalt.html" name="Inhalt" />
</frameset>
<noframes>
<body>Ihr Browser kann mit Frames nichts anfangen!
</body>
</noframes>
</html>

In allen Unterseiten sollte nun überprüft werden, ob ein Frameset existiert; wenn nicht, soll das Frameset aufgebaut werden. Dies geschieht mit ein wenig JavaScript: Die URL der aktuellen Seite wird über die Kommandozeile an eine Datei frameset-laden.html übergeben, die die Frame-Struktur erzeugt.

Der folgende Code gehört in alle Unterseiten:

<script type="text/javascript"><!--
if (self == top) {
   location.href = "frameset-laden.html?" + location.href;
}
//--></script>

Die Datei frameset-laden.html wertet die Kommandozeile aus und baut – mittels document.write() – die Frame-Struktur auf. Beachten Sie, dass Sie das gesamte Frameset mit JavaScript erzeugen müssen; eine Mischung ist nicht möglich (sie wäre zwar syntaktisch prinzipiell korrekt, die Browser kommen damit aber nicht zurecht).

<html>
<head><title>Homepage mit Frames</title></head>
<script type="text/javascript"><!--
function tag(s) {
   document.write("<" + s + ">");
}
tag('frameset cols="150,*"');
tag('frame src="navigation.html" name="Navi"');
seite = location.search.substring(1,
location.search.length);
   //location.search beginnt mit "?" !
tag("frame src='" + seite + "' name='Inhalt'");
tag("/frameset");
//--></script>
</html>

Denken Sie daran, dass location.search mit einem Fragezeichen beginnt; Sie dürfen daher die Zeichenkette erst ab dem zweiten Zeichen (es hat den Index 1) auswerten.

Die mit JavaScript generierten Framesets lassen sich noch weiter verfeinern. Wenn Sie eine größere Website haben, wird sich im (fiktiven) linken Frame nicht immer dieselbe Navigation befinden. Sie können mehrere Frameset-Dateien erstellen und – je nach aufgerufener Unterseite – einen Link auf eine bestimmte dieser Frameset-Seiten setzen. Stellen Sie sich folgende Zuordnungstabelle vor (Tabelle 8.1):

Der Code könnte hier folgendermaßen aussehen:

<script type="text/javascript"><!--
if (self == top) {
   if (location.href.indexOf("/produkte")>=0) {
      location.href = "frameset1.htm?" + location.href;
   } else if (location.href.indexOf("/investorrelations")>=0) {
      location.href = "frameset2.htm?" + location.href;
   } else {
   location.href = "frameset3.htm?" + location.href;
   }
}
//--></script>

Bei einem Schreibzugriff auf location.href wird sofort die neue Seite geladen; JavaScript-Code, der dahinter folgt, wird nicht mehr ausgeführt. Sauberer wäre es natürlich, mit else zu arbeiten.

10.2.2 Auf Daten von Unterframes zugreifen  

Referenzen auf die Unterframes eines Fensters werden in dem Array frames (um genau zu sein, unter window.frames oder self.frames oder this.frames) gespeichert. Wenn Sie in der Datei frameset.html auf den linken Frame zugreifen wollen, haben Sie folgende Möglichkeiten:

window.A

window.frames[0]

window.frames["A"]

Aber immer der Reihe nach:

window.A: A ist der Wert des name-Attributs des entsprechenden Frames. Zwei Dinge sollten Ihnen hier deutlich werden: Geben Sie jedem Frame einen einprägsamen Namen, und verwenden Sie keine JavaScript-Begriffe (beispielsweise sollten Sie den Frame nicht "location" nennen, Sie können dann nicht mit window.location auf ihn zugreifen).

window.frames[0]: Wie bereits erwähnt, werden Referenzen auf alle Frames in der jeweiligen HTML-Seite in dem Array frames abgespeichert. Wie bei allen JavaScript-Arrays beginnt der Index bei 0; frames[0] bezeichnet also den ersten Frame. Die Frames werden dabei nach dem Vorkommen im HTML-Dokument nummeriert. Mit frames[1] erhält man somit eine Referenz auf den zweiten Frame in der Beispielseite (b.html).

window.frames["A"]: Das ist eine Mischung aus beiden Varianten. Hier kann man auch auf Frames mit speziellen Namen wie etwa "location" zugreifen. Diese Methode bedeutet jedoch recht viel Tipparbeit, und Sie werden sie sehr selten sehen. Je nachdem, wie einprägsam Ihre Frame-Namen sind, sollten Sie eine der beiden ersten Methoden verwenden.

Abbildung 10.4 verdeutlicht die Zugriffsmöglichkeiten auf andere Frames noch einmal ganz allgemein.

Abbildung 10.4     Zugriffsmöglichkeiten auf andere Frames

Mit diesem Wissen können Sie fremden Frames auch noch auf die folgenden Weisen entkommen. Denken Sie daran: Wenn Sie sich im obersten Frame in der Hierarchie befinden, zeigen parent und top auf das aktuelle Fenster:

<script type="text/javascript"><!--
if (top.frames.length>0) {
   top.location = self.location;
}
//--></script>

oder:

<script type="text/javascript"><!--
if (parent.frames.length>0) {
   top.location = self.location;
}
//--></script>

Sie sehen hieran schon, wie man die beiden Methoden – top und parent bzw. frames – miteinander kombinieren kann: Will man auf einen Frame zugreifen, der sich auf derselben Hierarchie-Ebene befindet, so greift man mit top oder (ggfs. mit mehrfacher Anwendung von) parent auf den nächsten gemeinsamen Vorfahren der beiden Frames zu und geht dann über frames in der Hierarchie wieder hinab. Um im Beispiel von oben von dem Frame mit der Datei c.html zu dem Frame mit der Datei d.html zu gelangen, gibt es folgende Möglichkeiten:

parent.D

top.B.frames[1]

parent.parent.B.D

Wenn Sie Zugriff auf den Frame haben, können Sie damit auch auf alle Eigenschaften des Frames oder seiner Unterobjekte zugreifen, beispielsweise auf document, location oder auch auf globale Variablen im JavaScript-Code des Frames.

10.2.3 Mehrere Frames gleichzeitig ändern  

Eine der Fragen, die in Newsgroups am häufigsten gestellt werden, lautet: »Wie kann ich den Inhalt mehrerer Frames gleichzeitig ändern?« Dies ist eine Problemstellung, die tatsächlich häufig vorkommt. Denken Sie an eine der Standardanwendungen für Frames: die Navigation. Wenn Sie einen Punkt in der Navigation auswählen, wird (in einem anderen Frame) die entsprechende Inhaltsseite geladen. Jedoch kann es auch vorkommen, dass sich das Aussehen der Navigation selbst ändern soll (beispielsweise soll der gerade ausgewählte Navigationspunkt hervorgehoben werden, damit der Benutzer weiß, wo er sich befindet).

Dieser Effekt ist sehr einfach umzusetzen. Auf die oben aufgezeigte Art und Weise wird auf die entsprechenden Frames zugegriffen und die Eigenschaft location.href entsprechend verändert. Hier lohnt es sich, eine eigene Funktion zu schreiben, die Sie wiederverwenden können. Als Parameter werden Referenzen auf die Frames sowie die zu ladenden URLs übergeben:

<script type="text/javascript"><!--
function ZweiFrames(frame1, url1, frame2, url2) {
   frame1.location.href = url1;
   frame2.location.href = url2;
}
//--></script>

Stellen Sie sich vor, im vorherigen Beispiel befinden Sie sich im Frame A und wollen über einen Link in Frame C die Seite cc.html sowie in Frame D die Seite dd.html laden. Sie können das folgendermaßen tun:

<a href="javascript:ZweiFrames(parent.B.C, _fcksavedurl="javascript:ZweiFrames(parent.B.C, _fcksavedurl="javascript:ZweiFrames(parent.B.C, _fcksavedurl="javascript:ZweiFrames(parent.B.C, _fcksavedurl="javascript:ZweiFrames(parent.B.C, 'cc.html', parent.B.D, 'dd.html');">hier klicken</a>

Sie sollten jedoch immer eine Alternative zur Verfügung haben, wenn der Browser des Benutzers kein JavaScript unterstützt. In diesem Fall ist das relativ einfach: Wenn Sie sich die Beispielseite noch einmal anschauen, sehen Sie, dass die Frames C und D in der Datei b.html definiert werden. Sie könnten also alternativ eine Datei bb.html erstellen, die folgendermaßen aussieht:

<html>
<head><title>Noch mehr Frames</title></head>
<frameset rows="100,*">
    <frame name="C" src="cc.html" />
    <frame name="D" src="dd.html" />
  </frameset>
</html>

Der Link vereinfacht sich dann zu folgendem puren HTML:

<a href="bb.html" _fcksavedurl="bb.html" _fcksavedurl="bb.html" _fcksavedurl="bb.html" _fcksavedurl="bb.html" target="B">hier klicken</a>

Überlegen Sie also immer, ob Sie die Aufgabenstellung auch ohne JavaScript lösen können. Sie vergrößern damit das mögliche Publikum für Ihre Webseite.

10.2.4 JavaScript in Frames auslagern  

Wenn Sie eine größere Website mit Frames aufgebaut haben und recht viel JavaScript verwenden, lohnt es sich natürlich, oft benutzte Befehle in Funktionen auszulagern und diese Funktionen auf irgendeine Seite in einem der Frames zu schreiben. Mittels top, parent und frames kann dann auf diese Funktion zugegriffen werden. Ein nahe liegender Ansatz ist es, die Funktionen in der obersten Seite der Hierarchie, also der Seite mit dem Haupt-Frameset abzulegen. Die Funktionen können dann mit top.funktionsname() aufgerufen werden.

Am besten ist es jedoch, wenn alle JavaScript-Funktionen und globalen Variablen in einem Frame abgelegt werden; idealerweise in einem Frame, der sich nie ändert (beispielsweise in einem Navigationsframe). Alternativ dazu können Sie auch auf einen alten HTML-Trick zurückgreifen und einen unsichtbaren Frame verwenden. Der folgende Code erzeugt zwei Frames, wobei der zweite jedoch nicht sichtbar ist, da er nur einen Pixel hoch ist. In diesem Frame lassen sich bequem Funktionen und Variablen ablegen.

<html>
<head><title>Unsichtbarer Frame</title></head>
<frameset rows="*,1" border="0" cellspacing="0" frameborder="0">
  <frame name="sichtbar" src="inhalt.htm" />
  <frame name="unsichtbar" src="skript.htm" />
</frameset>
<noframes>
<body>Ihr Browser kann mit Frames nichts anfangen!
</body>
</noframes>
</html>

10.2.5 Frames zählen 

Abschließend noch eine praktische Hilfsfunktion, die erneut den Einsatz von Frames zeigt und auch Programmierung mit Rekursion. Die Funktion subframes(frameref) soll die Anzahl der Unterframes des Frames mit der Referenz frameref ermitteln. Als Unterframes zählen hierbei jedoch nur die Frames, die ein Dokument ohne weiteres Frameset enthalten. Das geht sehr einfach mit Rekursion: Hat ein Frame keine Unterframes, wird er als Dokument gezählt; andernfalls wird die Funktion subframes() rekursiv für alle Unterframes aufgerufen:

function subframes(frameref) {
   if (frameref.frames.length==0) {
      return 1;
   } else {
      var summe = 0;
      for (var i=0; i<frameref.frames.length; i++) {
         summe += subframes(frameref.frames[i]);
      }
      return summe;
   }
}

10.3 Diashow 

Als Beispielanwendung dieses Kapitels soll eine Diashow entwickelt werden. Ihre Firma hat eine Firmenpräsentation erstellt. Diese soll nun auch in die Website integriert werden. Da die Präsentation mit einem mittelmäßigen Präsentationsprogramm erstellt worden ist, liegen Ihnen lediglich zehn HTML-Seiten vor, die aber nicht miteinander verlinkt sind. Unser Ziel soll es nun sein, diese zehn HTML-Seiten nacheinander anzuzeigen; alle zehn Sekunden soll die nächste Seite geladen werden. Um dem Besucher der Webseiten wenigstens ein bisschen Interaktivität vorzugaukeln, soll er die Animation anhalten, aber auch eine Seite vor- oder zurückspringen können. Das ist Ihr Pech und mein Glück, denn ohne diese Zusatzbedingung könnte man diese Aufgabe auch mit normalen (HTML-)Mitteln lösen.

10.3.1 Vorbereitungen  

Beginnen wir mit der Grundstruktur der Präsentation: Das folgende Frameset teilt das Browserfenster in die Präsentationsfläche (oben) und den Navigationsbereich (unten) auf:

<html> <head> <title>Firmenpräsentation</title> </head> <frameset rows="*,80"> <frame src="tour.html" name="Tour" /> <frame src="nav.html" name="Nav" /> </frameset> <noframes> <body>Ihr Browser kann mit Frames nichts anfangen! </body> </noframes> </html>

Abbildung 10.5     Die Startseite der Diashow

In Abbildung 10.5 sehen Sie, wie die Navigationsleiste ungefähr aussehen soll. Als Optionen soll es Start, Stop, Vor, Zurück und Verlassen geben. Wir werden JavaScript-Funktionen mit denselben Namen schreiben. Dazu brauchen wir noch eine Funktion, die die nächste Seite der Animation in den oberen Frame lädt. Außerdem benötigen wir noch globale Variablen. Unter anderem muss jederzeit bekannt sein, welche Seite der Diashow gerade angezeigt wird und ob die Animation gerade läuft oder pausiert. Neben einigen weiteren Angaben (wie viele Seiten? welche Verzögerung zwischen den Seiten?) benötigen wir noch eine weitere Variable. Da mit setTimeout() gearbeitet werden muss, sollte die zurückgegebene ID in einer Variablen abgespeichert werden.

Im Folgenden sehen Sie das Grundgerüst für die Datei nav.html; in den folgenden Abschnitten werden die Funktionen mit Inhalt gefüllt.

<html> <head> <script type="text/javascript"><!-- //globale Variablen var seiten = 10; //Anzahl der Seiten tourX.htm var stat = "stop"; //Status der Animation: //"stop" oder "start" var akt = 1; //aktuell angezeigte Seite tourX.htm var ID = 0; //ID des letzten Timeouts var delay = 10000; //Verzögerung in Millisekunden //Funktionen function start() { //Funktion zum Starten/Fortsetzen der Diashow } function stop() { //Funktion zum Anhalten/Pausieren der Diashow } function vor() { //Funktion zum Vorspringen in der Animation } function zurueck() { //Funktion zum Zurückspringen in der Animation } function verlassen() { //Funktion zum Verlassen der Animation } //--></script> </head> <body onload="start()"> <form onsubmit="return false;"> <center> <table border="0" cellpadding="10"> <tr> <td><a href="javascript:start()">Start</a></td> <td><a href="javascript:stop()">Stop</a></td> <td><a href="javascript:zurueck()">Zurück</a></td> <td><a href="javascript:vor()">Vor</a></td> <td><a href="javascript:verlassen()">Verlassen</a></td> </tr> </table> </center> </form> </body> </html>

10.3.2 Diashow starten  

Wenn der Benutzer auf Start klickt, muss zuerst überprüft werden, ob die Diashow nicht etwa schon läuft (über die Statusvariable stat). Falls doch, braucht keine Aktion zu erfolgen; andernfalls muss der Status geändert und die neue Seite nach Ablauf von zehn Sekunden geladen werden. Das Laden der weiteren Seiten geschieht dann in der Funktion lade(), die sich – mittels Timeout – immer wieder selbst aufruft. Ein besonderer Fall liegt noch vor, wenn die letzte Seite der Diashow angezeigt wird: Dann darf auch keine Aktion erfolgen.

function start() { if (stat == "stop" && akt < seiten) { stat = "start"; ID = setTimeout("lade(akt+1)", delay); } } function lade(nummer) { parent.Tour.location.href = "tour" + nummer + ".html"; akt = nummer; if (stat == "start" && akt < seiten) { ID = setTimeout("lade(akt+1)", delay); } else if (akt == seiten) { stat = "stop"; } }

10.3.3 Diashow anhalten  

Auch das Anhalten der Diashow gestaltet sich nicht weiter schwierig: Die Statusvariable muss angepasst werden, und das Laden der nächsten Seite muss mit clearTimeout() unterbunden werden:

function stop() { stat = "stop"; clearTimeout(ID); }

10.3.4 Vorwärts und rückwärts springen  

Der Wechsel zur vorherigen oder zur nächsten Seite der Diashow ist relativ ähnlich. Zuerst wird überprüft, ob man sich auf der ersten bzw. letzten Seite befindet (dann geschieht nichts); dann wird clearTimeout() und danach lade() aufgerufen. Beachten Sie, dass die vorherige oder nächste Seite sofort aufgerufen werden soll, also wird setTimeout() nicht verwendet.

function vor(){ if (akt < seiten) { clearTimeout(ID); lade(akt+1); } } function zurueck() { if (akt > 0) { clearTimeout(ID); lade(akt-1); } }

10.3.5 Diashow verlassen 

Der letzte Punkt auf der Aufgabenliste, das Verlassen der Diashow, verdient eigentlich keine eigene Überschrift. Es wird einfach eine andere Seite geladen; als ordentlicher Programmierer löschen Sie außerdem noch alle Timeouts.

function verlassen() { clearTimeout(ID); top.location.href = "andereseite.html"; }

Beachten Sie, dass im obigen Code die neue URL auf der obersten Ebene der Frame-Hierarchie aufgerufen wird; Sie rufen ja das JavaScript-Kommando in einem Unterframe auf!

Das Tutorial ist ein Auszug aus der 7. Auflage des Buches von Christian Wenz:

JavaScript und Ajax - Das umfassende Handbuch Galileo Computing, 853 Seiten, 8. aktualisierte Auflage Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von Galileo Press. Mehr Informationen zum aktualisierten Fachbuch für Webentwickler gibt es hier: JavaScript und Ajax

Alle Kapitel des Buches: 1 Grundlagen 2 JavaScript-Praxis 3 Professionelles JavaScript 4 Web 2.0 und Ajax 5 Kommunikation 6 Serverseitige Programmierung 7 Sicherheit 8 Praxis 9 Anhang