HTML-Dateien selbst erstellen
Dokumentation: JavaScript
JavaScript Anwendungsbeispiele

Zwei Frames gleichzeitig ändern

 Kurzbeschreibung
 Quellcode
 Erläuterungen zum Quellcode
 Beispiel testen: so sieht's aus

Kurzbeschreibung

Wer schon einmal ein HTML-Projekt mit mehreren  Frames erstellt hat, kann nachvollziehen, daß es manchmal wünschenswert ist, beim Ausführen eines Verweises nicht nur den Inhalt eines, sondern zweier oder mehrerer Frame-Fenster gleichzeitig zu ändern. Nun kann man in solchen F�llen zwar auf eine Datei verweisen, die ein neues, entsprechendes Frame-Set definiert. Aber wenn Sie viele solcher Verweise haben, wird dieses Verfahren schnell aufwendig. Als Alternative dazu können Sie sich mit einem JavaScript behelfen.

Beachten Sie:

Quellcode

Beispiel
Anzeigebeispiel: So sieht's aus

Das Beispiel betrifft eine Schauspielerinfothek. Es zeigt zwei HTML-Dateien: die Datei, in der das  Frame-Set definiert wird, und eine Datei mit Verweisen, bei deren Anklicken sich zwei andere Frames gleichzeitig ändern.
Studieren Sie das Beispiel aufmerksam und lesen Sie anschließend die Erläuterungen dazu. Zur besseren Orientierung enthält das Beispiel Verweise zu den entsprechenden Erläuterungen, z.B. (1). Diese Verweise gehören nicht zum Quellcode. Falls Sie das Beispiel in einen Editor kopieren, müssen Sie diese Verweise löschen. Andernfalls erhalten Sie JavaScript-Fehlermeldungen.

Datei rahmen.htm:

  <html>
  <head>
  <title>FrameTest</title>
  </head>
  (1) <frameset cols="30%,*">
   <frame src="verweise.htm">
   <frameset rows="25%,*">
     <frame src="welcome1.htm">
     <frame src="welcome2.htm">
   </frameset>
  </frameset>
  </html>

Datei verweise.htm:

  <html>
  <head>
  <title>Verweise</title>
  <script language="JavaScript">
  <!--
   (2) function ZweiFrames(URL1,F1,URL2,F2)
   {  
    parent.frames[F1].location.href=URL1;
    parent.frames[F2].location.href=URL2;
   }
  //-->
  </script>
  </head>
  <body text=#000000 link=#0000CC vlink=#000099 alink=#0000FF>
  <h1>Verweise</h1>
  (3) <a href="javascript:ZweiFrames('susan1.htm',1,'susan2.htm',2)">Susan Sarandon</a>
  <br>
  <a href="javascript:ZweiFrames('jack1.htm',1,'jack2.htm',2)">Jack Nickelson</a>
  </body>
  </html>

Erläuterungen zum Quellcode

(1) Frame-Set definieren
Im  Beispiel wird eine Datei rahmen.htm erstellt, die das Frame-Set für eine Schauspielerinfothek bereitstellt. Das Frame-Set bewirkt folgende Konstellation:

Links gibt es eine Spalte mit Verweisen zu einzelnen Schauspielern. Die Verweise stehen in der Datei verweise.htm. Rechts gibt es zwei Frames. Der obere, kleinere soll jeweils ein Bild des Schauspielers und die wichtigsten Lebensdaten enthalten. Der untere, größere soll ausführliche Infos bieten, z.B. eine Lebensbeschreibung und Informationen darüber, in welchen Filmen der Schauspieler mitgewirkt hat. Beim Aufruf des Frame-Sets wird links die Datei verweise.htm angezeigt. Rechts werden Projektbegrüßungsdateien mit den Namen welcome1.htm und welcome2.htm angezeigt.

(2) JavaScript-Funktion zum Ändern zweier Frames definieren
Im  Beispiel enthält die Datei verweise.htm jene Verweise, bei deren Anklicken sich der Inhalt der beiden rechten Frames gleichzeitig ändern soll. Deshalb wird in dieser Datei der erforderliche JavaScript-Code notiert. Im Kopf der HTML-Datei, also zwischen <head> und </head> wird mit dem dafür vorgesehenen HTML-Tag <script language="JavaScript"> .... </script> ein  Programmbereich definiert. Innerhalb dieses Bereichs wird eine  Funktion mit Namen ZweiFrames() definiert. Diese Funktion erwartet vier Parameter:

Dadurch ist die Funktion allgemein gehalten, d.h. Sie können diese Funktion auch in ganz anderen Frame-Sets zum gleichen Zweck verwenden.
Innerhalb der Funktion stehen zwei Anweisungen. In der ersten Anweisung wird dem ersten gewünschten Frame-Fenster die gewünschte URL-Adresse zugewiesen, in der zweiten Anweisung wird dem zweiten gewünschten Frame-Fenster die zweite gewünschte URL-Adresse zugewiesen. Über parent kann innerhalb eines Frame-Sets das gesamte Frame-Set-Fenster angesprochen werden. Mit parent.frames[n] lassen sich bestimmte einzelne Frame-Fenster innerhalb des Frame-Sets ansprechen. Der Index beginnt bei 0 zu zählen, d.h. das erste im Frame-Set definierte Frame-Fenster läßt sich mit parent.frames[0] ansprechen, das zweite Frame-Fenster mit parent.frames[1] usw. Die Funktion ZweiFrames bekommt die Fenster-Indizes als Parameter übergeben. Deshalb steht z.B in der ersten Anweisung parent.frames[F1]. Über location.href kann eine URL-Adresse angesprochen werden, z.B. eine beliebige HTML-Datei im gleichen Projekt. Mit dem gesamten Ausdruck parent.frames[F1].location.href=URL1; wird einem Frame-Fenster innerhalb des Frame-Sets eine beliebige URL-Adresse zugewiesen. Da zwei Frames gleichzeitig geändert werden sollen, gibt es zwei solcher Anweisungen.

(3) Verweis zum Ändern zweier Frames notieren
Die Datei verweise.htm enthält im  Beispiel Verweise zu Infos über Susan Sarandon und Jack Nickelson. Damit sich beim Klicken auf einen dieser Verweise beide anderen Frame-Fenster gleichzeitig ändern, wird bei der Angabe href= nicht wie üblich eine URL-Adresse angegeben, sondern zuerst das Schlüsselwort javascript, dahinter ein Doppelpunkt, und dahinter der Aufruf der im Dateikopf definierten Funktion ZweiFrames(). Dabei werden die vier erwarteten Parameter übergeben.
Gehen Sie bei weiteren Verweisen analog dazu vor.

Blättern:
Lauftext in der Statuszeile     Taschenrechner

HTML-Dateien selbst erstellen
Dokumentation: JavaScript
JavaScript Anwendungsbeispiele

© 1997  Stefan Münz, s.muenz@euromail.com