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 Aktivieren eines Verweises nicht nur den Inhalt eines, sondern zweier oder mehrerer Frame-Fenster gleichzeitig zu ändern. Eine Möglichkeit ist, in solchen Fällen auf eine Datei zu verweisen, die ein neues, entsprechendes Frameset definiert. Wenn Sie aber viele solcher Verweise haben, wird dieses Verfahren schnell aufwendig. Als Alternative dazu können Sie sich mit einem JavaScript behelfen.

Die Basis bildet ein gewöhnlicher Verweis, der beim Aktivieren einen der beiden Frames ändert. Das Ändern des zweiten Frames wird durch ein JavaScript bewerkstelligt, das beim Klicken auf den Verweis ausgeführt wird. Diese Aufteilung hat allerdings den grundlegenden Nachteil, dass bei fehlender oder abgeschalteter JavaScript-Unterstützung des Browsers nur ein Frame geändert wird. Dies hat zum Beispiel die Auswirkung, dass Robots von Suchmaschinen nur zu den Seiten vordringen können, die im ersten Frame erscheinen, denn sie folgen nur dem href-Verweisziel.

Ein weiterer Nachteil ist, 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 "Zurück" und "Vorwärts" 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 FrameAendern (URI, Framename) {
  parent[Framename].location.href = URI;
}

function ZweiFramesBack (Framename1, Framename2) {
  Frame2 = parent[Framename2];
  parent[Framename1].history.back();
  if (!window.opera)
    window.setTimeout("Frame2.history.back()", 100);
}

function ZweiFramesForward (Framename1, Framename2) {
  Frame2 = parent[Framename2];
  parent[Framename1].history.forward();
  if (!window.opera)
    window.setTimeout("Frame2.history.forward()", 100);
}
</script>
</head>
<body bgcolor="#EEEEEE" link="#AA5522" vlink="#772200" alink="#000000">
<div>
<hr noshade="noshade" size="1">

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

<h2>Verweise</h2>
<p>
<a href="zweiframes_tu.htm" target="unten" onclick="FrameAendern('zweiframes_to.htm', 'oben')"><b>Willkommen</b></a>
<br>
<a href="zweiframes_su.htm" target="unten" onclick="FrameAendern('zweiframes_so.htm', 'oben')"><b>Susan Sarandon</b></a>
<br>
<a href="zweiframes_ju.htm" target="unten" onclick="FrameAendern('zweiframes_jo.htm', 'oben')"><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 Frame-Fenster 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 Frame-Fenster geladen wird. Diese Datei enthält die Verweise. Alle Verweise ändern den Inhalt von zwei Frame-Fenstern 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. Die ersten beiden Verweise enthalten im 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 und bei dem Verweis mit dem Verweistext vor die Funktion ZweiFramesForward. In beiden Fällen werden der jeweils aufgerufenen Funktion die Namen der zwei Frames als Parameter übergeben, nämlich 'oben' und 'unten'.

Bei den übrigen Verweisen handelt es sich zunächst um gewöhnliche Verweise zu anderen Frames. Sie enthalten im href-Attribut die Datei, die im ersten, unteren Frame erscheinen soll. Dazu besitzen sie das Attribut target="unten". Im Event-Handler onclick befindet sich der JavaScript-Code, der den zweiten Frame beim Klick auf den Link ändert. Dieser ruft die Funktion FrameAendern() auf, welche den zweiten, oberen Frame ändert.

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 FrameAendern(), ZweiFramesBack() und ZweiFramesForward() notiert, die von den Verweisen in der Datei aufgerufen werden.

Die Funktion FrameAendern() erwartet zwei Parameter:
1. den URI des gewünschten Inhalts des zweiten Frame-Fensters (URI)
2. den Namen des gewünschten zweiten Frame-Fensters innerhalb des Frame-Sets (Framename)
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 wird über parent[Framename] das window-Objekt des zweiten Frames angesprochen. Mit dieser alternativen Schreibweise zum Ansprechen von Unterobjekten kann der Framename variabel sein. Wenn der Funktion beispielsweise der Framename "oben" übergeben wird, entspricht dieser Ausdruck der Notation parent.oben.
Das Ändern der Eigenschaft location.href bewirkt einen JavaScript-Verweis zu einer anderen Adresse. Dieser Eigenschaft wird die beim Funktionsaufruf übergebene Adresse URI zugewiesen.

Die Funktionen ZweiFramesBack() und ZweiFramesForward() benötigen ebenfalls zwei Parameter, nämlich die Namen der betroffenen Frame-Fenster (Framename1 und Framename2). 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/10 Sekunde gesetzt ist, hat pragmatische Gründe: manche Browser 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
	Objektunabhängige Funktionen

SELFHTML/Navigationshilfen JavaScript/DOM Anwendungsbeispiele

Zwei Frames gleichzeitig ändern