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

© 2001 selfhtml@teamone.de