SELFHTML: JavaScript / Anwendungsbeispiele / Zwei Frames gleichzeitig ändern
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Wie Sie mit Hilfe von JavaScript die Inhalte von zwei Frames beim Klick auf einen Verweis gleichzeitig ändern können.
Keywords: SELFHTML, JavaScript, Frames, zwei Frames gleichzeitig, location.href, history.back, history.forward, eval, History
Date: 2005-10-03T08:55:27+02:00

| # 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&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 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

© 2007 Impressum