JavaScript/Tutorials/Fenster- und Frameszugriff

In Javascript gibt es das window-Objekt als oberste Instanz über allen anderen Objekten. Es bietet die Methode window.open() zum Öffnen neuer Fenster an (und außerdem alle weiteren Unterobjekte, Eigenschaften und Methoden, die in der Javascript-Objektreferenz aufgelistet sind). Außerdem kennen viele Browser Frames und iframes, die ebenfalls Fensterobjekte anlegen. Diese Fensterobjekte sind Unterobjekte des obersten window-Objektes. Ein häufig auftretendes Problem ist aber, herauszufinden, wie man aus einem bestimmten Fenster heraus ein anderes Fenster ansprechen kann, um dort z.B. eine neue Seite mittels der Eigenschaft location.href = "seitenurl" des jeweiligen Fensters zu laden.

Programmiertechnische Grundlagen

Die Fenster, Unterfenster und Unterunterfenster bilden in Javascript eine Baumstruktur. Das bedeutet: Es gibt ein Startfenster, von dem aus sich der Baum aufbaut und immer weiter verzweigt. Die Kunst besteht also darin, sich an den einzelnen Zweigen des Baumes entlangzubewegen, um sicher ans Ziel zu gelangen. Anhand der illustrierten Beispiele und der schrittweisen Verkomplizierung sollten die meisten Praxisfälle und auch ein paar kniffligere Konstrukte verständlich sein.

Beispiel und Erläuterungen

Spezielle Fenstereigenschaften

Ein Fenster (egal, wie es entstanden ist) hat drei Eigenschaften, die sich für Frames anwenden lassen: top, parent und self.

Die Eigenschaft top repräsentiert das oberste Fenster des Framesets. In dieser Beschreibung hat dieses Fenster immer einen blauen Balken, weil es immer ein Browserfenster ist. Ist das Fenster, in dem top abgefragt wird, schon das oberste Fenster, zeigt top sozusagen auf sich selbst.

Die Eigenschaft parent bezieht sich immer auf das im Fensterbaum eine Ebene höher liegende Fenster, wenn es ein solches gibt. Andernfalls bezieht sich parent ebenfalls auf das eigene Fenster.

Das Fensterobjekt self schließlich bezieht sich immer auf das eigene Fenster. Man kann es häufig auch weglassen, da Javascript sich dann automatisch auf das eigene Fenster bezieht, aber der Vollständigkeit halber ist es hier erwähnt.

Außerdem gibt es für die Verwendung in Popup-Fenstern die Eigenschaft opener, welche jenes Fenster repräsentiert, welches das Popup-Fenster mit window.open geöffnet hat. Wurde das Fenster nicht mit window.open() geöffnet, dann ist in opener der Wert null gespeichert.

Diese Eigenschaften werden in den folgenden Beispielen verwendet.

Beispiel 1: Frameset mit drei Frames

Folgende Framesetdefinition erstellt ein Frameset mit drei Frames: Einem Titelframe oben quer, sowie zwei Frames links und rechts darunter.

Beispiel

[...Auszug...]
<frameset rows="20%,80%">
  <frame name="titel" href="titel.htm">
  <frameset cols="50%,50%">
    <frame name="links" href="navigation.htm">
    <frame name="rechts" href="inhalt.htm">
  </frameset>
</frameset>

In der Animation wird gezeigt, wie Javascript aus den Fensterdefinitionen einen Baum generiert.

Innerhalb dieses Baumes kann man auf die anderen Fenster zugreifen, indem man von dem Fenster, in dem sich der Javascript-Code befindet, Schritt für Schritt entlang der Baumlinien zum Zielfenster wandert. Dabei hängt man alle Fensternamen, die man durchschreitet, hintereinander.

Der spezielle Fenstername parent erlaubt es dabei, eine Ebene nach oben zu gelangen, und der Fenstername top bringt einen automatisch zur obersten Ebene, von der aus man wieder hinabsteigen kann.

In Javascript gibt es als folgende Möglichkeiten, um beispielsweise auf die Eigenschaft location.href eines Fensters zuzugreifen:

Wege über das oberste Fenster:
            top.location.href -> URL des obersten Fensters
      top.titel.location.href -> URL des Titelframes
      top.links.location.href -> URL des linken Frames
     top.rechts.location.href -> URL des rechten Frames

Wege über relative Adressierung aus dem Frame "titel":
         parent.location.href -> URL des obersten Fensters
   parent.links.location.href -> URL des linken Frames
  parent.rechts.location.href -> URL des rechten Frames
   parent.titel.location.href -> URL des Titelframes

           self.location.href -> URL des Titelframes

Beachten Sie: Es gibt durchaus mehrere Wege, auf das gleiche Fenster zuzugreifen. Im Beispiel greifen die Varianten top.titel.location.href, parent.titel.location.href und self.location.href vom Fenster titel aus gesehen alle auf das gleiche Fenster zu, nämlich den Titelframe. Diese Varianten unterscheiden sich vom Ergebnis absolut nicht. Empfehlenswert ist, immer vom top-Fenster auszugehen.

Beispiel 2: Frameset im Frameset

Ausgehend vom Beispiel 1 kann man in einem der Framefenster natürlich noch ein weiteres Frameset laden (und in diesem wieder eines, und so weiter...). Diese weitere Aufteilung nicht im obersten Frameset zu definieren ist dann notwendig, wenn man in einem Framefenster sowohl Dateien im gesamten Fenster anzeigen will, als auch geteilte Informationen, beispielsweise eine Tabelle, deren Kopfzeile dauerhaft stehenbleibt.

Nehmen wir an, dass im Frame links ein weiteres Frameset geladen wird, welches aus den beiden Fenstern oben und unten besteht.

Beispiel

[...Auszug...]
<frameset rows="50%,50%">
  <frame name="oben" href="oben.htm">
  <frame name="unten" href="unten.htm">
</frameset>

In der Animation wird gezeigt, wie Javascript in der bestehenden Fensterdefinition eine neue Verzweigung einbaut.

Innerhalb dieses Baumes kann man wieder durch Entlanghangeln an den Baumlinien auf die anderen Fenster zugreifen. Erst in dieser Konstellation macht der Einsatz von parent einen Unterschied.

In Javascript gibt nun folgende Möglichkeiten, um auf die Eigenschaft location.href der verschiedenen Fenster zuzugreifen:

Wege über das oberste Fenster:
                 top.location.href -> URL des obersten Fensters
           top.titel.location.href -> URL des Titelframes
           top.links.location.href -> URL des linken Frames
          top.rechts.location.href -> URL des rechten Frames
      top.links.oben.location.href -> URL des Frames oben im Frame links
     top.links.unten.location.href -> URL des Frames unten im Frame links

Wege aus dem Fenster "oben" der dritten Ebene:
              parent.location.href -> URL des Frames "links"
       parent.parent.location.href -> URL des obersten Fensters (top)
        parent.unten.location.href -> URL des Frames "unten"
parent.parent.rechts.location.href -> URL des Frames "rechts"

                self.location.href -> URL des eigenen Frames "oben"

Beachten Sie: Sie können den gleichen Namen für ein Fenster auf Javascript-Seite mehrfach verwenden. top.fenster.fenster.location.href geht vom Hauptfenster zum Framefenster fenster, in dem ein Frameset geladen ist, welches seinerseits ein Framefenster namens fenster definiert, und greift dann auf location.href zu.
Vermeiden Sie solche Konstrukte, denn es führt schneller zu Verwirrungen, als Ihnen lieb ist. Geben Sie allen Framefenstern eindeutige Namen.

Beispiel 3: Popup-Fenster

Natürlich kann man im bestehenden Beispiel auch Popup-Fenster öffnen. Dazu ist wieder entscheidend, in welchem Fenster der Code für das Öffnen des Fensters steht, denn an dieser Stelle wird das Fenster in den Fensterbaum eingehängt.

Mit dem folgenden Javascript-Code öffnen Sie ein Popupfenster.

Beispiel

popup = window.open('popupseite.htm','popup','width=200,height=200');

In der Animation wird gezeigt, wie Javascript in der bestehenden Fensterdefinition das Popupfenster einbaut. Nehmen wir an, der Popupcode wird im Framefenster rechts ausgeführt.

Indem Sie das Ergebnis der Methode window.open() einer Variablen (im Beispiel popup zuweisen, können Sie mit Javascript aus dem Fenster rechts auf das Popupfenster zugreifen. Umgekehrt zeigt die Eigenschaft opener im Popup-Fenster auf das Fenster, welches das Popupfenster geöffnet hat: rechts.

Aus Sicht der Framefenster ändert sich der Zugriff auf ein Popupfenster nicht.

Zugriff auf das Popupfenster von allen Fenstern aus:

top.rechts.popup.location.href -> URL des Popup

Zugriff entlang des gesamten Framebaumes vom Fenster oben aus:

parent.parent.rechts.popup.location.href -> URL des Frames "links"

Aus dem Popupfenster kommt man mit dem Fenster opener eine Ebene höher - vergleichbar mit parent bei Frames.

Zugriff aus dem Popupfenster:

opener.top.links.unten.popup.location.href -> URL des Frames unten

opener.parent.title.location.href -> URL des Frames titel

Beachten Sie: Beim Öffnen eines Popupfensters geben Sie sowohl eine Variable an, mit der Sie über Javascript auf das Fenster zugreifen, als auch einen Fensternamen, mit dem Sie in HTML über das target-Attribut Links in dieses Fenster laden können. Diese zwei Angaben können sich unterscheiden, was die Übersicht verringert. Geben Sie identische Namen an!

Bedenken Sie, dass die Variable, welche als Zeiger auf das Popup-Fenster dient, sehr leicht verloren gehen kann, indem z.B. im Framefenster rechts eine neue Seite geladen wird. Der Zugriff auf das Popup ist dann abgeschnitten. Sie können den Zugriff aber wiederherstellen. Dazu benötigen Sie den Fensternamen, den Sie beim ersten Öffnen des Popups vergeben haben. Öffnen Sie einfach erneut ein Popup-Fenster mit window.open(). Der folgende Code stellt die Zeigervariable auf das Popup wieder her. Diese Methode können Sie auch anwenden, um weitere Zeigervariablen auf das Popup in anderen Fenstern zu erzeugen.

Beispiel

popup = window.open('','popup','');

Der Browser verwaltet intern die Liste der Fensternamen. Wenn Sie ein neues Fenster öffnen wollen, dessen Fenstername schon existiert, wird einfach das alte Fenster weiterverwendet. Denken Sie sich also einen Fensternamen aus, der nicht von anderen Websites benutzt wird, die zur gleichen Zeit gleichnamige Popupfenster geöffnet haben könnten.

Beispiel 4:

Innerhalb eines Popup-Fensters kann natürlich wieder ein Frameset geladen werden. Dieses Frameset erzeugt also wieder Unterfenster. Zu beachten ist hierbei, dass das Frameset im Popup nicht direkter Bestandteil des darüberliegenden Framesets wird. Die Trennlinie ist der Übergang zwischen den Browserfenstern. Das bedeutet, dass im Popup ein neues Fensterobjekt top angelegt wird, welches das Popupfenster selbst bezeichnet. Ebenso gelangt man mit parent nur bis zu dieser Ebene zurück. Der Übergang zum Elternfenster muss mittels opener geschehen.

Folgendes Frameset wird im Popup geladen.

Beispiel

[...Auszug...]
<frameset rows="50%,50%">
  <frame name="popoben" href="popoben.htm">
  <frame name="popunten" href="popunten.htm">
</frameset>

Der Zugriff auf die einzelnen Fenster innerhalb des Popups ist identisch mit Beispiel 1. Der Zugriff über die Popupgrenzen hinaus ist identisch mit Beispiel 3. Zu beachten ist, dass zuerst mit top das oberste Framefenster angesprochen werden muss, den nur dieses kennt den "Rückweg" mittels opener.

Aus dem Frame popunten:

top.opener.top.title.location.href -> URL des Titelframes

top.opener.parent.links.oben.location.href -> URL des Frames oben

... und so weiter.

Aus dem Elternframeset heraus (aus allen Fenstern):

top.rechts.popup.popunten.location.href -> URL des Frames popunten

Zum Abschluss noch ein krasses Beispiel für extrem verschachtelte Framesets und Popupfenster. Folgen Sie dem roten Pfeil auf seinem Weg, und sehen Sie die Zusammensetzung der Fensternamen an.

Zusammenfassung

Wenn Sie verschiedene Fenster, seien es Frames, iframes oder Popupfenster, verwenden und nicht klarkommen mit dem Zugriff darauf: Vergegenwärtigen Sie sich den Baum, den Sie mit Ihren Fenstern aufgebaut haben.

Nutzen Sie das Fenster top, um endlose parent.parent.parent...-Aneinanderreihungen zu vermeiden. Da Sie stattdessen die Framenamen angeben müssen, sehen Sie sofort an der Namenskette, welches Fenster Sie ansprechen wollen.

Beachten Sie: Anstatt wie hier im Beispiel auf location.href können Sie auf alle Eigenschaften, Methoden, Funktionen und Variablen zugreifen, die im Zielfenster definiert sind. Sie könnten beispielsweise im obersten Framefenster zentrale Variablen und Funktionen definieren, welche Sie mit top.variablenname = wert oder top.funktion(parameter) aufrufen.

Bedenken Sie hierbei nur, dass Sie mit ihrem Frameset keine Domaingrenzen überschreiten. Ist dies der Fall, wird Javascript sich mit der Meldung "Zugriff verweigert" melden. Diese Meldung kann nicht umgangen werden, sie ist elementares Sicherheitsfeature in Javascript und ein deutliches Zeichen dafür, dass Sie ihr Konzept ändern müssen. Domaingrenzen sind übrigens sehr streng ausgelegt. Die folgenden Domainnamen sind unterschiedlich, obwohl sie meist den identischen Server meinen:

    http://www.domain.tld
    http://www.domain.tld:80
    http://domain.tld

Vermeiden Sie also Links, welche die Domain explizit benennen, um solchen Problemen aus dem Weg zu gehen.