SELFHTML: JavaScript / Anwendungsbeispiele / Zwei Frames gleichzeitig ändern

SELFHTML/Quickbar JavaScript Anwendungsbeispiele

	Zwei Frames gleichzeitig ändern
	Zwei Frames gleichzeitig ändern - das Beispiel

Zwei Frames gleichzeitig ändern - das Beispiel

Anzeigebeispiel: So sieht's aus

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.

Hinweis: 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.

Beispiel Teil 1 - 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>

Beispiel Teil 2 - 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 Nicholson</a>
  </body>
  </html>

Erläuterung:

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.

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 JavaScript-Bereich definiert. Innerhalb dieses Bereichs wird eine Funktion mit Namen ZweiFrames() definiert. Diese Funktion erwartet vier Parameter:
1. die URL-Adresse des gewünschten Inhalts des ersten Frame-Fensters (URL1)
2. den Index des gewünschten ersten Frame-Fensters innerhalb des Frame-Sets (F1)
3. die URL-Adresse des gewünschten Inhalts des zweiten Frame-Fensters (URL2)
4. den Index des gewünschten zweiten Frame-Fensters innerhalb des Frame-Sets (F2)
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.

Verweis zum Ändern zweier Frames notieren
Die Datei verweise.htm enthält im Beispiel Verweise zu Infos über Susan Sarandon und Jack Nicholson. 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.


weiter:	Seitenanzeige in Frames verhindern
zurück:	Objektunabhängige Funktionen

SELFHTML/Quickbar JavaScript Anwendungsbeispiele