Diese Seiten sind Teil von Bachsau’s Archiv.
Die hier beschriebenen Praktiken entsprechen nicht mehr dem Stand der Technik!
Bitte nutzen Sie für aktuelle Projekte das fortlaufend aktualisierte SELFHTML-Wiki.

SELFHTML

Zwei Frames gleichzeitig ändern

Informationsseite

nach unten Hinweise zu diesem Beispiel
nach unten Quelltext mit Erläuterungen

Beispiel-Seite Anzeigebeispiel: So sieht's aus

 nach unten 

Hinweise zu diesem Beispiel

Wer schon einmal ein HTML-Projekt mit mehreren Kapitel 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.

nach obennach unten

Netscape 2.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 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:

Beispiel-Seite 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 Seite javascript:. Dahinter folgt jeweils der Aufruf einer Seite Funktion. Bei dem Verweis mit dem Verweistext zur&uuml;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 Seite 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 Seite 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 Seite 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 Seite 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 Seite 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 Seite 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 Seite history.back() bzw. Seite 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 Seite 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 Seite bedingten Anweisung wird gefragt, ob der Browser dieses Objekt nicht kennt. Nur in diesem Fall wird die Objektmethode ein zweites Mal aufgerufen.

 nach oben
weiter Seite Seitenanzeige in Frames verhindern
zurück Seite Objektunabhängige Funktionen
 

© 2007 Seite Impressum

Originaladresse dieses Dokuments: http://de.selfhtml.org/javascript/beispiele/zweiframes.htm