JavaScript/Objekte/Frames

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Hinweis

Verzichten Sie im WWW auf Framesets und verwenden Sie diese nur, wenn keine andere Technologie zur Verfügung steht. Wenn Sie Teile der Seite auslagern wollen, sind serverseitige Techniken meist besser geeignet.

Mit dem Objekt frames haben Sie Zugriff auf Frames, also auf ein Frame-Set und seine Frame-Fenster, die in einer HTML-Datei definiert sind.

Da jedes Frame-Fenster aus Sicht des Browsers ein eigenes Fenster darstellt, ist das frames-Objekt lediglich eine Variante des window-Objekts, also des allgemeinen Fensterobjekts. Alle Eigenschaften und Methoden, die zum window-Objekt gehören, lassen sich auch auf das frames-Objekt, also auf einzelne Frame-Fenster anwenden. Das frames-Objekt stellt nur deshalb ein eigenes Objekt dar, weil es eine zusätzliche Eigenschaft enthält, und weil bei der Adressierung von Frame-Fenstern in JavaScript ein paar Besonderheiten zu beachten sind:

Beispiel: Schema 1 / Beispiel 1:
parent.frames[#].Eigenschaft/Methode(); parent.frames[1].location.href = "sport.html";


Beispiel: Schema 2 / Beispiel 2:
parent.NameDesFrames.Eigenschaft/Methode(); parent.RechtesFenster.back();

parent ist ein reservierter Fenstername, den Sie zum Ansprechen von Fenstern innerhalb eines Frame-Sets verwenden können. Anstelle von parent können Sie auch top verwenden. Mit parent sprechen Sie das Eltern-Fenster des aktuellen Frame-Fensters an, mit top in jedem Fall das oberste Anzeigefenster des Browsers.

Frame-Fenster können Sie auf zwei Arten ansprechen:

  • mit einer Indexnummer (wie in Schema 1 / Beispiel 1)

Bei Verwendung von Indexnummern geben Sie frames an und dahinter in eckigen Klammern, das wie vielte Frame-Fenster im Frame-Set Sie meinen. Beachten Sie, dass der Zähler bei 0 beginnt, d.h. das erste Frame-Fenster sprechen Sie mit frames[0] an, das zweite Frame-Fenster mit frames[1] usw. Beim Zählen gilt die Reihenfolge, in der die <frame>-Befehle im Frame-Set definiert sind.

  • mit dem Namen des Frame-Fensters (wie in Schema 2 / Beispiel 2)

Dabei geben Sie den Namen an, der bei der HTML-Definition des Frame-Fenster bei <frame ...> im Attribut name definiert worden ist.

Da das frames-Objekt eigentlich eine Variante des window-Objekts ist, können Sie nicht nur die alle Eigenschaften und Methoden des window-Objekts auf das frames-Objekt anwenden, sondern auch alle anderen, die in der Hierarchie unterhalb des window-Objekts stehen. Ebenso, wie Sie beispielsweise mit window.document.forms[0].elements[0].value = "Stefan" den Inhalt eines Formular Eingabefelds in einer gewöhnlichen HTML-Datei ändern können, können Sie das gleiche innerhalb eines Frame-Sets etwa mit parent.frames[1].document.forms[0].elements[0].value = "Stefan" erreichen.

Auf JavaScripts in anderen Frames zugreifen[Bearbeiten]

  • JavaScript 1.0
  • IE
  • Firefox
  • Leer
  • Safari
  • Opera

Mit der gleichen Syntax, wie Sie auf HTML-Elemente in anderen Frame-Fenstern zugreifen können, können Sie auch auf JavaScripts zugreifen, die in einem anderen Frame-Fenster aktuell notiert sind. So können Sie Variablen des anderen Scripts auslesen und Funktionen des anderen Scripts aufrufen.

Das folgende Beispiel zeigt ein Frameset mit zwei Fenstern oben und unten. Das obere Fenster hat bei der Frameset-Definition den Namen oberesFenster erhalten. Aus dem unteren Frame-Fenster wird nun auf ein JavaScript im oberen Frame-Fenster zugegriffen


Beispiel: Beispieldatei im oberen Frame-Fenster:
<html> <head> <title>Test</title> <script> var c = 0; function gibaus_c () { alert(c); } function erhoehe_c () { c++; window.setTimeout("erhoehe_c()", 100); } </script> </head> <body onload="erhoehe_c()"> <p>Hier wird einfach nur 10 mal pro Sekunde die Variable <i>c</i> erhöht!</p> </body></html>
Beispiel: Beispieldatei im unteren Frame-Fenster:
<html> <head> <title>Test</title> <script> function reset_c () { parent.oberesFenster.c = 0; } </script> </head> <body> <p> <a href="javascript:parent.oberesFenster.gibaus_c()">Variable <i>c</i> anzeigen!</a><br> <a href="javascript:reset_c()">Variable <i>c</i> auf 0 setzen!</a> </p> </body> </html>

Im oberen Fenster ist ein Script mit zwei Funktionen namens gibaus_c() und erhoehe_c() notiert. Die Funktion erhoehe_c() wird mit dem Event-Handler onload im einleitenden <body>-Tag erstmals gestartet und ruft sich dann mit Hilfe der Methode setTimeout() alle 100 Millisekunden, also 10 mal pro Sekunde selber wieder auf. Dabei erhöht sie jedes Mal die Variable c um 1.

Im unteren Fenster sind zwei Verweise notiert. Der erste gibt den aktuellen Zählerstand von c aus. Dazu wird mit parent.oberesFenster.gibaus_c() auf die Funktion gibaus_c() im anderen Frame-Fenster zugegriffen. Der zweite Verweis ruft eine Funktion reset_c() auf, die im Dateikopf des eigenen Dokuments notiert ist. Diese greift jedoch mit parent.oberesFenster.c auf die Variable c im anderen Frame-Fenster zu und setzt diese auf 0 zurück.