SELFHTML: JavaScript / Anwendungsbeispiele / Zwei Frames gleichzeitig ändern

SELFHTML/Navigationshilfen

JavaScript/DOM

Anwendungsbeispiele

Zwei Frames gleichzeitig ändern

Hinweise zu diesem Beispiel
Quelltext mit Erläuterungen

Anzeigebeispiel: So sieht's aus

Hinweise zu diesem Beispiel

Wer schon einmal ein HTML-Projekt mit mehreren Frames erstellt hat, kann nachvollziehen, dass 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.

Ein Nachteil von "zwei Frames gleichzeitig ändern" mit JavaScript ist allerdings, dass dabei die History-Funktion im Browser nicht mehr so arbeitet wie gewünscht. Denn aus Sicht des Browsers wurden zwei Verweise ausgeführt, doch ein History-Eintrag springt nur eine Seite zurück. Der Anwender muss also zweimal auf den Zurück-Button des Browsers klicken, um wieder dahin zu kommen, wo er vor dem Anklicken des Verweises war. Eine Möglichkeit, dieses unerwünschte Verhalten auszuschalten, ist, selber Verweise anzubieten, die das "Back" und "Forward" im Browser auslösen, jedoch so, dass sich dabei wie gewünscht ebenfalls zwei Frames gleichzeitig ändern. Das Beispiel auf dieser Seite zeigt deshalb auch, wie sich so etwas realisieren lässt.

Quelltext mit Erläuterungen

Das Beispiel zeigt die Datei mit den Frameset-Definitionen und die Datei mit den Verweisen. Die übrigen Dateien, die im Anzeigebeispiel aufgerufen werden, sind für das Verständnis ohne Bedeutung.

Beispiel - Datei `zweiframes.htm`:

Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Zwei Frames gleichzeitig &auml;ndern</title>
</head>
<frameset cols="180,*">
 <frame src="zweiframes_links.htm" name="links">
 <frameset rows="180,*">
   <frame src="zweiframes_to.htm" name="oben">
   <frame src="zweiframes_tu.htm" name="unten">
 </frameset>
</frameset>
</html>

Beispiel - Datei `zweiframes_links.htm`:

<html>
<head>
<title>ZweiFrames - Verweise</title>
<script type="text/javascript">
<!--
function ZweiFrames(URI1,F1,URI2,F2) {
  Frame1=eval("parent."+F1);
  Frame2=eval("parent."+F2);
  Frame1.location.href = URI1;
  Frame2.location.href = URI2;
}
function ZweiFramesBack(F1,F2) {
  Frame1=eval("parent."+F1);
  Frame2=eval("parent."+F2);
  Frame1.history.back();
  if (!window.opera) window.setTimeout("Frame2.history.back()",10);
}
function ZweiFramesForward(F1,F2) {
  Frame1=eval("parent."+F1);
  Frame2=eval("parent."+F2);
  Frame1.history.forward();
  if (!window.opera) window.setTimeout("Frame2.history.forward()",10);
}
//-->
</script>
</head>
<body bgcolor="#EEEEEE" text="#000000" link="#AA5522" vlink="#772200" alink="#000000">

<div>
<hr noshade size="1">
<a href="javascript:ZweiFramesBack('oben','unten')"><b>zur&uuml;ck</b></a>
<b>|</b>
<a href="javascript:ZweiFramesForward('oben','unten')"><b>vor</b></a>
<hr noshade size="1">
</div>

<h2>Verweise</h2>
<p>
<a href="javascript:ZweiFrames('zweiframes_to.htm','oben','zweiframes_tu.htm','unten')">
<b>Willkommen</b>
</a>
<br>
<a href="javascript:ZweiFrames('zweiframes_so.htm','oben','zweiframes_su.htm','unten')">
<b>Susan Sarandon</b>
</a>
<br>
<a href="javascript:ZweiFrames('zweiframes_jo.htm','oben','zweiframes_ju.htm','unten')">
<b>Jack Nicholson</b>
</a>
</p>

</body>
</html>

Erläuterung:

Der erste Teil des Beispiels zeigt die Datei zweiframes.htm, die das Frame-Set für eine Schauspielerinfothek bereitstellt. Das Frame-Set ist dreigeteilt: links ein Framefenster mit Namen links für Verweise, und rechts zwei Frames mit den Namen oben und unten für Informationen.

Der zweite Teil des Beispiels zeigt die Datei zweiframes_links.htm, die ja, wie in der Datei zweiframes.htm ersichtlich, gleich zu Beginn in das linke Framefenster geladen wird. Diese Datei enthält die Verweise. Alle Verweise ändern den Inhalt von zwei Framefenstern gleichzeitig, nämlich jeweils den der beiden rechten Frames mit den Namen oben und unten. Deshalb ist in dieser Datei auch der JavaScript-Code für das Ändern der beiden anderen Frames notiert.

Um die Funktionsweise zu verstehen, ist es sinnvoll, zunächst einmal die HTML-Verweise im <body>-Bereich der Datei zweiframes_links.htm zu betrachten. Alle Verweise enthalten beim href-Attribut JavaScript-Code, eingeleitet durch den Pseudo-Event-Handler javascript:. Dahinter folgt jeweils der Aufruf einer Funktion. Bei dem Verweis mit dem Verweistext zurück wird die Funktion ZweiFramesBack() aufgerufen, bei dem Verweis mit dem Verweistext vor die Funktion ZweiFramesForward, und bei den übrigen Verweisen die Funktion ZweiFrames(). In allen Fällen werden der jeweils aufgerufenen Funktion die Namen zweier vorhandener Frames als Parameter übergeben, nämlich 'oben' und 'unten'.

Im Kopf der HTML-Datei, also zwischen <head> und </head>, wird mit <script type="text/javascript"> .... </script> ein JavaScript-Bereich definiert. Innerhalb dieses Bereichs sind die drei Funktionen ZweiFrames(), ZweiFramesBack() und ZweiFramesForward() notiert, die von den Verweisen in der Datei aufgerufen werden.

Die Funktion ZweiFrames() erwartet vier Parameter:
1. den URI des gewünschten Inhalts des ersten Frame-Fensters (URI1)
2. den Namen des gewünschten ersten Frame-Fensters innerhalb des Frame-Sets (F1)
3. den URI des gewünschten Inhalts des zweiten Frame-Fensters (URI2)
4. den Namen 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 zunächst zwei Aufrufe der Funktion eval. Dies ist nötig, damit der JavaScript-Interpreter die übergebenen Namen der Framefenster nicht einfach als beliebige Zeichenkette interpretiert, sondern versucht als vorhandene Objekte zu erkennen. Die Aufrufe sind so gestaltet, dass in den Variablen Frame1 bzw. Frame2 im Beispiel hinterher die Objekte parent.oben bzw. parent.unten gespeichert sind. Solchermaßen ausgerüstet, lassen sich die beiden Variablen anschließend in den Aufrufen Frame1.location.href und Frame2.location.href wie die entsprechenden Objekte verwenden, so dass im Beispiel eigentlich ausgeführt wird: parent.oben.location.href bzw. parent.unten.location.href. Die Eigenschaft location.href bewirkt einen JavaScript-Verweis zu einer anderen Adresse. In der Funktion werden den beiden Aufrufen dieser Eigenschaft einfach die beiden beim Funktionsaufruf übergebenen Adressen URI1 bzw. URI2 zugewiesen.

Die Funktionenen ZweiFramesBack() und ZweiFramesForward() sind ähnlich aufgebaut. Allerdings benötigen sie nur zwei Parameter, nämlich die Namen der betroffenen Framefenster (F1 und F2). Mit Aufrufen der Objektmethoden history.back() bzw. history.forward() erreichen sie die Funktionalität der entsprechenden Buttons "Zurück" und "Vor" im Browser. dass der jeweils zweite Aufruf der Objektmethoden noch mal in ein setTimeout() mit einer geringen Verzögerung von 1/100 Sekunde gesetzt ist, hat pragmatische Gründe: manche Versionen des Internet Explorers würden ansonsten "vergessen", den zweiten Aufruf durchzuführen.

Beachten Sie:

Opera 5.12 interpretiert die Methode history.back() auf das _top-Fenster bezogen und ignoriert die Angabe des Zielfensters beim Aufruf der Methode. Das gilt auch, wenn Sie die Methode innerhalb eines Frames selbst aufrufen. Der Browser hält sich strikt an die Reihenfolge der History-Einträge im Hauptfenster. Wurden mittels JavaScript zwei Frames gleichzeitig geändert, betrachtet Opera diese Änderung als einen Eintrag und geht in der History zwei Schritte zurück. Aus diesem Grund gilt es zu verhindern, dass Opera ein zweites Mal ein history.back() ausführt. Dies wird im obigen Beispiel mit if (!window.opera) erreicht. Nur ein Opera-Browser kennt das Objekt window.opera. In der bedingten Anweisung wird gefragt, ob der Browser dieses Objekt nicht kennt. Nur in diesem Fall wird die Objektmethode ein zweites Mal aufgerufen.


	Seitenanzeige in Frames verhindern
	Objekt-unabhängige Funktionen