vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbacknächstes Kapitel


Woche 3

Tag 16

Frames und das window-Objekt

Die an diesem Tag durchzuarbeitende Lektion wird ziemlich umfangreich. Wir haben einen der zentralen Punkte für den effektiven Einsatz von JavaScript vor uns. Am heutigen Tag wollen wir uns dem window-Objekt und einem seiner wichtigsten und eng verwandten Unterobjekte, frame, intensiver widmen. Das Objekt window ist auf der obersten Objektebene in der Objekthierarchie angesiedelt und beinhaltet alle diejenigen Objekte als Unterobjekte, die mit der Anzeige von Informationen im Browser irgendetwas zu tun haben.

Über das Objekt frame haben Sie Kontrolle über Frames, einer Technik zur Aufteilung des Anzeigebereichs eines Browsers in einzelne Segmente, die unabhängig von einander mit Inhalt gefüllt werden können. Dazu müssen wir Frames erst einmal über ihre HTML-Technik einführen, um uns dann mit dem JavaScript-Zugriff darauf zu beschäftigen.

Das window-Objekt

Das Objekt window beinhaltet wie gesagt alle diejenigen Objekte als Unterobjekte, die mit der Anzeige von Informationen im Browser irgendetwas zu tun haben (siehe dazu Tag 15). Insbesondere steht das immer vorhandene Hauptanzeigefenster eines Browsers darüber zur Verfügung. Sie können aber auch zusätzliche Instanzen des Objekts window erzeugen. Dies erfolgt im Allgemeinen über die window-Methode open(). Dabei wird das neue Fenster als Client des aufrufenden Fensters direkt geöffnet. Es gilt folgende Syntax:

var [Fenstervariable] = 
window.open("[URL]", "[Fenstername]", "[Optionen]")

Beispiel:

open("Meinedatei.htm","meinFenster");

Sinnvoll (aber nicht zwingend) ist es wie gesagt, bei der Erstellung einer Fensterobjektinstanz diese in einer Variablen zu speichern. Sie können dann an späterer Stelle noch darauf zugreifen (etwa zum Schließen des Fensters).

Beispiel:

var fenster1 = open("Meinedatei.htm","meinFenster");

Das Schließen von Fensterinstanzen erfolgt über die Methode close(), welche das vorangestellte Fensterobjekt schließt. Das Fensterobjekt wird einfach mit dem Namen der Variablen angesprochen, in der die Fensterinstanz bei der Erstellung über die open()-Methode gespeichert wurde. Sie können sowohl von einem anderen Fenster aus ein fremdes Fenster schließen als auch das gerade angezeigte Fenster. Dies funktioniert aber nur innerhalb vorgegebener Randbedingungen. Sie müssen eine Variable (sprich: Namen) zur Verfügung haben, die eine Objektreferenz des zu schließenden Fensters beinhaltet. Insbesondere ist dies für das Hauptfenster des Browsers erst Mal ein Problem. Es gibt aber die reservierten Fensternamen self oder window, die immer für das gerade aktive Fenster stehen. Damit kann man den Browser selbst schließen. Jedes aktive Fenster (auch das Hauptfenster) lässt sich über die Anweisungen

window.close();

oder

self.close();

schließen, wenn Sie innerhalb des Fensters ausgelöst wird. Probieren Sie einfach die nachfolgende Übung aus.

Beispiel 1:

Erstellen Sie bitte nachfolgende HTML-Datei (Name der Datei window1.htm):

<HTML>
<HTML>
<SCRIPT language="JavaScript">
var meinFenster;
function fenster_auf()
{
meinFenster = open("bild1.htm","DiesistkeinleeresFenster");
}
function fenster_zu()
{
meinFenster.close();
}
</SCRIPT>
<BODY>
<A href="JavaScript:fenster_auf()">
Neues Fenster auf
</A>
<BR>
<A href="JavaScript:fenster_zu()">
Neues Fenster zu
</A>
<BR>
<A href="JavaScript:self.close()">
Aktives Fenster zu
</A>
<BR>
</BODY>
</HTML>

Über drei Links rufen wir hier JavaScript auf. Einmal als Inline-Referenz. Diese schließt das aktive Fenster mit den Links. Bitte erstellen Sie die zweite Datei (Bild1.htm), welche im gleichen Verzeichnis abgespeichert werden muss und die in der neu erzeugten Objektinstanz angezeigt werden soll:

<HTML>
<BODY>
<IMG src="131.gif">
</BODY>
</HTML>

Laden Sie die Datei window1.htm und probieren Sie die Links aus.

Abbildung 16.1:  Das per JavaScript geöffnete zweite Fenster

Der Navigator wird übrigens auch das aktive Fenster ohne weiteres schließen, während der Internet Explorer rückfragt.

Abbildung 16.2:  Warnung, dass das aktive Fenster geschlossen werden soll

Ihnen wird sicher auffallen, dass Folgefenster beim Öffnen in der gleichen Größe wie das aufrufende Fenster dargestellt werden und die Position (wenn kein Vollbild vorliegt) relativ zur dessen Position gesetzt wird. Dies kann natürlich individuell angepasst werden, wozu im Wesentlichen einige der Eigenschaften der open()-Methode genutzt werden können (wobei gleich vorausgeschickt werden muss, dass dies von einigen Browsern leider nicht umgesetzt wird).

Es können sowohl Parameter beim Aufruf einer Fensterinstanz verwendet als auch bei bereits erzeugtem Fenster den Fenstereigenschaften neue Werte zugewiesen werden. Die erlaubten Optionen beim Öffnen sind folgende:

Option

Beschreibung

width=(Pixel)

Die Option erzwingt eine in Pixeln angegebene Fensterbreite.

height=(Pixel)

Die Option erzwingt eine in Pixeln angegebene Fensterhöhe.

resizable=yes/no

Die Option legt fest, ob die Größe fest oder veränderbar ist (Voreinstellung yes).

scrollbars=yes/no

toolbar=yes/no

status=yes/no

menubar=yes/no

location=yes/no

Die Optionen legen jeweils fest, ob das Fenster eine fenstereigene Bildlaufleiste, Buttonleiste, Statuszeile, Menüleiste und URL-Adresszeile hat. Voreinstellung ist immer no.

directories=yes/no

Die Option legt fest, ob das Fenster über fenstereigene Directory-Buttons (Netscape) verfügt.

Tabelle 16.1: Optionen beim Öffnen

Beispiel 2:

Erstellen Sie bitte nachfolgende HTML-Datei (Name der Datei window2.htm):

<HTML>
<HTML>
<SCRIPT language="JavaScript">
var meinFenster;
function fenster_auf()
{
meinFenster =
open(
  "bild1.htm",
  "DiesistkeinleeresFenster",
  "width=600, height=250, resizable=yes,
  directories=yes, menubar=yes, location=yes");
}
function fenster_zu()
{
meinFenster.close();
}
</SCRIPT>
<BODY>
<A href="JavaScript:fenster_auf()">
Neues Fenster auf
</A>
<BR>
<A href="JavaScript:fenster_zu()">Neues Fenster zu</A>
<BR>
<A href="JavaScript:self.close()">
Aktives Fenster zu
</A>
<BR>
</BODY>
</HTML>

Laden Sie die Datei window2.htm in verschiedene Browser und probieren Sie die Links aus. Es wird auffallen, dass nicht alle Optionen in jedem Browser umgesetzt werden.

Abbildung 16.3:  Der Internet Explorer zeigt auch eine Menüleiste an

Abbildung 16.4:  Das per JavaScript geöffnete zweite Fenster im Navigator

In JavaScript 1.3 gibt es noch einige zusätzliche Optionen, die aber sehr inkonsistent von den Browsern behandelt werden. So kann über

dependent=yes/no

festgelegt werden, ob das Elternfenster geschlossen werden soll, wenn das Clientfenster geschlossen wird (yes). Über

hotkeys=yes/no

lassen sich die Browser-Hotkeys deaktivieren (no). Die Angaben

innerHeight=(Pixel)

und

innerWidth=(Pixel)

ergänzen die bisherigen Angaben zur Höhe und Breite, indem Sie explizit den Anzeigebereich des neuen Fensters festlegen (nicht die äußere Größe, welche den inneren Anzeigebereich auf Grund optionaler Statuszeile und Menüzeile nicht genau festlegt). Besonders wichtig ist jedoch, dass über

screenX=(Pixel)

und

screenY=(Pixel)

die linke obere Ecke des Browserfensters festgelegt werden kann.

Beispiel 3:

Erstellen Sie bitte nachfolgende HTML-Datei (Name der Datei window3.htm):

<HTML>
<HTML>
<SCRIPT language="JavaScript">
var meinFenster;
function fenster_auf1()
{
meinFenster =
open(
  "bild1.htm",
  "DiesistkeinleeresFenster",
  "width=300,height=250,screenX=100,screenY=100");
}
function fenster_auf2()
{
meinFenster =
open(
  "bild1.htm",
  "DiesistkeinleeresFenster",
  "width=300,height=250,screenX=200,screenY=300");
}
function fenster_zu()
{
meinFenster.close();
}
</SCRIPT>
<BODY>
<A href="JavaScript:fenster_auf1()">
Neues Fenster auf 100, 100
</A>
<BR>
<A href="JavaScript:fenster_auf2()">
Neues Fenster auf 200, 300
</A>
<BR>
<A href="JavaScript:fenster_zu()">
Neues Fenster zu
</A>
<BR>
</BODY>
</HTML>

Laden Sie die Datei window3.htm in verschiedene Browser und probieren Sie die Links aus. Der Navigator kann mit den Positionierungen gut umgehen (wenn das Folgefenster schon offen ist, wird es bei einem Klick auf die alternative Positionierung einfach dorthin verschoben - probieren Sie es aus). Der Internet Explorer wird die Positionierung nicht sauber ausführen.

Die Eigenschaften von window

Die Eigenschaften von dem Objekt window stehen immer dann zur Verfügung, wenn zuvor eine Objektinstanz von window erzeugt wurde oder ein bereits vorhandenes Fenster über eine der gültigen Fensterreferenzen angesprochen wird. Hier eine Auswahl der wichtigsten Eigenschaften samt Beschreibung:

Eigenschaft

Beschreibung

closed

Wenn ein Fenster geöffnet und einer Variablen zugewiesen wurde, kann man über diese, das Objekt bezeichnende, Variable und diese Eigenschaft bestimmen, ob das Fenster mittlerweile wieder geschlossen wurde. Falls ja, hat die Eigenschaft den Wert true.

defaultStatus

Hierüber können Sie die Standardanzeige in der Statuszeile des Browsers ermitteln oder festlegen. Diese ist unter Umständen nicht permanent sichtbar, denn die Statuszeile des Browsers kann vielfältig beeinflusst werden, etwa über Setzen der Eigenschaft status.

innerHeight,
innerWidth

Höhe und Breite des Anzeigebereichs eines Browsers. Die Angaben sind verschieden zu den Werten der äußeren Höhe und Breite, da dort die Größe optionaler Elemente wie Statuszeile, Bildlaufleiste oder Menüzeile abgezogen werden muss.

frames

Ein Objektfeld als Eigenschaft von window. Wir kommen gleich bei
Frames darauf zurück.

length

Anzahl von offenen Fenstern der aktuellen Instanz des Browsers.

name

Über diese Eigenschaft kann der Name eines Fensters bestimmt werden.

outerHeight,
outerWidth

Die Höhe und Breite des gesamten Fensters.

opener

Das Fenster, von dem aus das aktuelle Fenster geöffnet wurde.

pageXOffset,
pageYOffset

Startposition des sichtbaren Dokuments im Fenster (Angabe links oben). Scrollen verändert den Wert.

parent

Übergeordnete Fenster der Objekthierarchie (read-only).

locationbar,
menubar,
personalbar,
scrollbars,
statusbar,
toolbar

Angabe, ob die Fensterinstanz eine eigene URL-Adresszeile, eine eigene Menüleiste, eine Zeile für die Favoriten (Internet Explorer) bzw. persönliche Symbolleiste, Bildlaufleisten, Statuszeile oder Werkzeugleiste anzeigt. Es handelt sich jeweils um ein Unterobjekt von window, das über die Eigenschaft visible (jeweils Wert true, falls das Objekt sichtbar gesetzt ist) zu manipulieren ist.

self

Das aktuelle Fenster (read-only).

status

Die Eigenschaft ermittelt oder setzt die aktuelle Anzeige der Statuszeile eines Fensters.

top

Oberstes window-Objekt in der Objekthierarchie (read-only).

Tabelle 16.2: Eigenschaften von window

Das window-Objekt gibt es bereits seit JavaScript 1.0, aber da waren noch nicht alle jetzt verfügbaren Eigenschaften implementiert. In JavaScript 1.1 wurden die Eigenschaften closed, history und opener hinzugefügt. JavaScript 1.2 brachte crypto, innerHeight, innerWidth, locationbar, menubar, offscreenBuffering, outerHeight, outerWidth, pageXOffset, pageYOffset, personalbar, screenX, screenY, scrollbars, statusbar und toolbar.

Beispiel 4:

Erstellen Sie bitte nachfolgende HTML-Datei (Name der Datei window4.htm):

<HTML>
<SCRIPT language="JavaScript">
var meinFenster;
function fenster_auf()
{
meinFenster =
open("bild1.htm","DiesistkeinleeresFenster");
meinFenster.outerHeight=300;
meinFenster.outerWidth=300;
}
function fenster_zu()
{
meinFenster.close();
}
</SCRIPT>
<BODY>
<A href="JavaScript:fenster_auf()">
Neues Fenster auf
</A>
<BR>
<A href="JavaScript:fenster_zu()">
Neues Fenster zu
</A>
<BR>
</BODY>
</HTML>

Laden Sie die Datei in verschiedene Browser und probieren Sie die Links aus. Der Navigator kann mit dem Setzen der Größe gut umgehen. Der Internet Explorer wird die Größenangaben nicht ausführen.

Die Event-Handler von window

Offiziell werden die folgenden Event-Handler beim window-Objekt unterstützt:

Die Methoden von window

Das window-Objekt besitzt einige sehr wichtige Methoden, die wir in den vorherigen Tagen auch vielfach schon verwendet haben. Nachfolgend finden Sie die wichtigsten Methoden des window-Objektes:

Methode

Eigenschaft

alert([Meldung])

Öffnen eines Anzeigefensters mit der in den Klammern spezifizierten Nachricht. Die auszugebende Meldung muss als Parameter in Hochkommata gesetzt werden. Rückgabewerte von eventuell dort notierten Funktionen oder Methoden werden als String ausgegeben.

back()

Entspricht weitgehend einem Klick auf die Zurück-Schaltfläche im Browser.

blur()

Entzieht einem Fenster den Focus (ähnlich dem Event-Handler onBlur).

captureEvents()

Auffangen von Ereignis-Objekten - mehr dazu morgen (Netscape).

clearTimeout

([TimeoutVar])

Diese Methode macht den Aufruf von setTimeout() wieder rückgängig, sofern dieser in der Form [TimeoutVar] = setTimeout() erfolgte. Diese Variable [TimeoutVar] muss clearTimeout() als Parameter übergeben werden.

close()

Die Methode schließt ein Fenster.

confirm([Meldung])

Erzeugt ein Dialogfenster zum Bestätigen oder Abbrechen einer
Aktion. Es gibt zwei Schaltflächen (OK und Abbruch), welche die Rückgabewerte true und false liefern. Diese können Sie dann in der aufrufenden Funktion auswerten. Die auszugebende Meldung muss als Parameter in Hochkommata gesetzt werden. Rückgabewerte von eventuell dort notierten Funktionen oder Methoden werden als String ausgegeben.

find([string
[,caseSensitive,
backward]])

Sucht im aktuellen Dokument nach der angegebenen Zeichenkette und gibt true zurück, wenn sie gefunden wurde. Über die optionalen boolschen Werte caseSensitive und backward kann angegeben werden, ob Groß- und Kleinschreibung relevant ist und ob vom aktuellen Punkt aus bis zum Anfang eines Dokumentes gesucht werden soll.

focus()

Aktiviert ein Fenster (ähnlich dem Event-Handler onFocus).

forward()

Entspricht weitgehend einem Klick auf die Vorwärts-Schaltfläche im Browser.

home()

Ruft die Startseite des Browsers auf.

moveBy(horizontal,
vertikal)

Verschiebt ein Fenster um die angegebenen Pixel in horizontale oder vertikale Richtung.

moveTo(x-Koordinate,
y-koordinate)

Verschiebt ein Fenster auf die angegebene X-/Y-Position.

open(URL, Fenstername, [Optionen])

Die Methode öffnet ein neues Fenster.

print()

Druckt den Inhalt einer Seite aus (analog dem Menübefehl zum Drucken).

prompt(

[Aufforderungstext], [Feldvorbelegung])

Die Methode fordert den Anwender in einem Dialogfenster mit einer OK- und einer Abbrechen-Schaltfläche zu einer Eingabe in einem Feld auf und gibt diesen Wert an die aufrufende Funktion zurück, wenn Sie die OK-Schaltfläche betätigen (bei Abbrechen den Wert null). Als Parameter geben Sie das Label des Eingabefeldes und optional einen Vorbelegungswert an ("" für keine Vorbelegung).

resizeBy
(horizontal,
vertikal)

Verändert die Größe von einem Fenster um die angegebenen Pixel in horizontale oder vertikale Richtung.

resizeTo(Breite, Hoehe)

Setzt die Größe von einem Fenster auf die angegebenen Pixel in der angegebenen Breite und Höhe.

scrollBy(horizontal, vertikal)

Scrollt den Inhalt von einem Fenster um die angegebenen Pixel in horizontale oder vertikale Richtung.

scrollTo(x-Koordinate, y-Koordinate)

Scrollt den Inhalt von einem Fenster auf die angegebene X-/Y-Position.

setTimeout(

[Anweisung],
[Millisek])

Diese Methode ruft die angegebene Anweisung nach der angegebenen Anzahl von Millisekunden auf. Der Rückgabewert kann einer Variablen zugewiesen werden, die von clearTimeout() zum
Widerrufen einer verzögerten Anweisung genutzt werden kann.

stop()

Bricht den Ladevorgang einer Seite ab. Entspricht weitgehend einem Klick auf die STOP-Schaltfläche im Browser.

Tabelle 16.3: Methoden von window

Die Methoden blur(), focus() und scroll() und die unterstützten Eventhandler onBlur, onError und onFocus wurden in JavaScript 1.1 eingeführt. JavaScript 1.2 brachte die neuen Methoden atob(), back(), btoa(), captureEvents(), clearInterval(), crypto.random(), crypto.signText(), disableExternalCapture(), enableExternalCapture(), find(), forward(), handleEvent(), home(), moveBy(), moveTo(), releaseEvents(), resizeBy(), resizeTo(), routeEvent(), scrollBy(), scrollTo(), setHotKeys(), setInterval(), setResizable(), setZOptions und stop(). Als deprecated gilt seitdem die scroll()-Methode.

Ein Klassiker, der die Eigenschaft status ausnutzt, ist das nachfolgende Beispiel. Die Statuszeile wird für eine Laufschrift genutzt, die von links nach rechts beliebigen Text Zeichen für Zeichen aufrollt. Ist der Text vollständig angezeigt, wird die Statuszeile gelöscht und es geht wieder von vorne los.

Dabei wird die Methode setTimeout() verwendet, um einen so genannten rekursiven Aufruf zu gewährleisten. Die Methode setTimeout() ruft nach der vorgegebenen Zeit (vom Zeitpunkt des Aufrufs an gerechnet) die als Parameter angegebene Anweisung auf. Damit die gleiche Anweisung erst dann ausgeführt wird, wenn die erste erledigt ist und ein immer gleiches, vorgegebenes Zeitintervall gewartet wurde, ruft man sich die aufgerufene Methode mit der Methode setTimeout() am Ende wieder selbst auf.

Beispiel 5:

Erstellen Sie bitte nachfolgende HTML-Datei (Name der Datei window5.htm):

<HTML>
<HTML>
<SCRIPT language="JavaScript">
var text = "Herzlich Willkommen bei RJS-EDV-KnowHow";
var anzeige = "";
var i=0;
function textRoll()
{
i=i+1;
anzeige = text.substring(0,i);
window.status=anzeige;
if (i == text.length) i = 0;
scrolltext();
}
function scrolltext()
{
setTimeout('textRoll()',100);
}
</SCRIPT>
<BODY onLoad="scrolltext()">
</BODY>
</HTML>

Abbildung 16.5:  Die Statuszeile wird dynamisch geschrieben

Im nächsten Beispiel wollen wir das Problem über Methoden angehen, dass eine Fenstergröße und eine Positionierung eines Fensters weder mit der open()-Methode noch mit deren Eigenschaften so gesetzt werden kann, dass alle Browser das gleich behandeln. Versuchen wir, inwieweit die passenden Methoden vom window-Objekt funktionieren. Dabei wenden wir auch das Schlüsselwort self an, um beim Laden einer Webseite das Hauptfenster des Browsers bereits in Größe und Position anzugeben.

Beispiel 6:

Erstellen Sie bitte nachfolgende HTML-Datei (Name der Datei window6.htm):

<HTML>
<SCRIPT language="JavaScript">
var meinFenster;
function fenster_auf()
{
meinFenster =
open("bild1.htm","DiesistkeinleeresFenster");
meinFenster.moveTo(100, 200);
meinFenster.resizeTo(400, 300);
}
function positionierung()
{
self.resizeTo(400, 300);
self.moveTo(150, 150);
self.scrollTo(0,200)
}
function fenster_zu()
{
meinFenster.close();
}
</SCRIPT>
<BODY onLoad="positionierung()">
<IMG src="131.gif">
<P>
<IMG src="132.gif">
<P>
<A href="JavaScript:fenster_auf()">
Neues Fenster auf
</A>
<BR>
<A href="JavaScript:fenster_zu()">
Neues Fenster zu
</A>
<BR>
</BODY>
</HTML>

Testen Sie die Datei in verschiedenen Browsern. Leider zeigt sich auch hier, dass nicht alle Methoden vollständig identisch funktionieren (aber doch recht gut).

Abbildung 16.6:  Das Folgefenster in Originalgröße und -positionierung im Netscape

Abbildung 16.7:  Die Startdatei im IE

Abbildung 16.8:  Die Startdatei im Netscape

Testen wir nun noch eine weitere wichtige Methode von window - confirm().

Beispiel 7:

<HTML>
<SCRIPT language="JavaScript">
var meinFenster;
function fenster_auf()
{
meinFenster =
open("bild1.htm","");
}
function fenster_zu()
{
if(window.confirm(
"Wollen Sie das Fenster wirklich schließen?"))
meinFenster.close();
}
</SCRIPT>
<BODY onLoad="positionierung()">
<A href="JavaScript:fenster_auf()">
Neues Fenster auf
</A>
<BR>
<A href="JavaScript:fenster_zu()">
Neues Fenster zu
</A>
<BR>
</BODY>
</HTML>

Abbildung 16.9:  Rückfrage

Abbildung 16.10:  Das Folgefenster in Originalgröße und -positionierung im IE

Wenn Sie das Folgefenster über den Link wieder schließen wollen, wird Ihnen ein Dialogfenster angezeigt. Nur, wenn Sie Ok drücken, wird das Fenster geschlossen.

Frames

Frames haben wir bisher einmal in einem Beispiel knapp angerissen, aber im Wesentlichen ist das Thema für uns an dieser Stelle noch Neuland. Frames bedeuten die Aufteilung des Anzeigebereichs eines Browsers in einzelne Segmente, die unabhängig von einander mit Inhalt gefüllt werden können. Ursprünglich von der Firma Netscape entwickelt, gehört die Frame-Technologie zum festen Bestandteil von HTML 4.0. Dementsprechend werden wir uns Frames auch wieder von HTML-Seite aus nähern.

Die Frame-Technologie beinhaltet zwei Fassetten. Es gibt einmal die Frames selbst, welche den Anzeigebereich des Browsers gliedern und dennoch eigenständige Fenster mit allen HTML-Darstellungmöglichkeiten bilden. Diese einzelnen Frames sind zusammen in einer umgebenden Struktur - dem so genannten Frameset - enthalten. Diese Frameset-Datei ist diejenige, welche in den Browser geladen wird. Sie enthält nur Informationen über Namen, Größe und Position der einzelnen im Anzeigefenster enthaltenen Frames. Insbesondere ist der eigentliche Inhalt der Frames nicht in der Frameset-Datei notiert.

Eine HTML-Datei, welche als Frameset-Datei für eine Framestruktur verwendet werden soll, hat einen anderen Aufbau wie eine gewöhnliche HTML-Datei. Es wird vor allen Dingen keinen <BODY>-Tag mehr benötigt. Dessen Funktion wird von dem <FRAMESET>-Container übernommen.

Eine Frameset-Datei kann zu dem <FRAMESET>-Container einen zusätzlichen <BODY>-Container haben. Dieser wird dann außerhalb des <FRAMESET>-Bereichs notiert (normalerweise in einem <NOFRAMES>-Container) und deckt den Fall ab, dass ein Browser keine Frames versteht. Immerhin gehören Frames wie gesagt zu HTML 4.0, und diesen Standard können noch nicht alle Browser. Zudem kann die Framedarstellung in einigen Browsern deaktiviert werden. In dem <BODY>-Container werden alle Anweisungen notiert, die notwendig sind, um ohne Frames sinnvolle Informationen anzuzeigen (und wenn es nur der Hinweis ist, dass ein Projekt Frames verwendet). Wir werden das gleich beim Grundgerüst sehen.

Bei der Definition der Frameset-Datei müssen genaue Angaben darüber gemacht werden, wie das Anzeigefenster aufgeteilt werden soll und welche Dateien konkret in ein einzelnes Frame zu laden sind.

Es müssen bei der Angabe der Aufteilung je nach Konzept entweder Reihen oder Spalten (Anzahl und Größe) oder auch beides definiert werden. Die Definition der Reihen und Spalten erfolgt als Erweiterung des <FRAMESET>-Tag. Über den Parameter

rows= "[Angabe in Prozent]"

legen Sie die Anzahl von Reihen und deren anfänglichen, prozentualen Anteil an der Fenstergröße fest. So viele durch Kommata getrennte Prozentwerte dort notiert werden, so viele Zeilen hat der Frameset. Analog werden die Spalten im einleitenden <FRAMESET>-Tag festgelegt, falls man eine Aufteilung nach Spalten wünscht. Dazu dient der Parameter

cols= "[Angabe in Prozent]".

Die Prozentangaben hinter dem Gleichheitszeichen sollten in Anführungszeichen stehen und definieren Verhältnisse der einzelnen Frames zueinander - nicht einen Faktor von der Größe des Gesamtanzeigefensters vom Browser! Insbesondere müssen die Summen der Prozentangaben nicht 100% ergeben. Die Angabe cols="50%,50%" definiert bei identischer Gesamtgröße des Browser-Anzeigefensters die gleiche Fenstergröße der Frames wie cols="17%,17%" oder cols="12345%,12345%".

Wenn also über den <FRAMESET>-Tag und seine Parameter ein äußeres Gerüst für eine Framestruktur aufgebaut ist, wird im Inneren für jede dort definierte Zeile oder Spalte ein einzelnes Frame angegeben.

Der Inhalt der Frames wird mit der Syntax

<FRAME src= "[URL]" name="[Name]"> 

spezifiziert. Über die scr-Angabe wird der URL des Inhalts von dem jeweiligen Frame gesetzt, name definiert einen internen Namen des Frames, über den es in Verweisen, aber auch aus JavaScript heraus angesprochen werden kann. Beide Angaben, sowohl der URL als auch der Name, sollten in Anführungszeichen stehen.

Der Name eines Frames ist relativ frei wählbar. Es gelten nur die üblichen Regeln für HTML-Anweisungen (keine Leerzeichen, so gut wie keine Sonderzeichen - außer dem Unterstrich _ ) und die Namen sollten recht sprechend sein. Gewisse Namen für Frames sind verboten, da diese reservierten Fensternamen bei Verweisen eine spezielle Bedeutung haben. Dies sind die folgenden Token:

Reserviert

Bedeutung

_self

Referenz auf das aktuelle Frame, wo eine Seite gerade dargestellt wird (Standardsituation).

_parent

Referenz auf das übergeordneten Frame bei verschachtelten Framestrukturen (darauf kommen wir gleich). Falls es kein übergeordnetes Fenster gibt, bedeutet dies eine Referenz auf ein neues Fenster (ohne Framestruktur).

_blank

Referenz auf ein neues Browserfenster ohne Framestruktur.

_top

Referenz auf das volle Browserfenster. Die Framestruktur verschwindet.

Tabelle 16.4: Reservierte Fensternamen.

Ein typisches Grundgerüst einer Framestruktur sieht von der Theorie her so aus:

<HTML>
<FRAMESET>
  ...Frames
</FRAMESET>
<NOFRAMES>
  <BODY>
    ... Alternativinformationen
  </BODY>
</NOFRAMES>
</HTML>

Beachten Sie bitte, dass in der <FRAMESET>-Anweisung noch keine Parameter vorkommen. Diese müssen für eine endgültige Frameset-Datei noch sinnvoll ergänzt werden.

Wenn ein Browser keine Frames darstellen kann, wird er nach dem Prinzip der Fehlertoleranz den vollständigen <FRAMESET>-Bereich samt darin enthaltener <FRAME>-Tags ignorieren. Er wird in der Regel auch die Anweisung <NOFRAMES> nicht kennen und auch diese ignorieren, was aber so gewollt ist. Diese Anweisung ist nur für Frame-fähige Browser gedacht. Ein Frame-fähiger Browser kennt die <NOFRAMES>-Anweisung und wird den vollständigen Container ignorieren. Nicht auf Grund des Prinzips der Fehlertoleranz, sondern weil er programmiert ist, diesen Container nicht anzuzeigen .

Ein nicht-Frame-fähiger Browser fängt hinter <NOFRAMES> mit dem Anzeigen der nachfolgenden Anweisungen und dem dort stehenden Klartext an. In dem <NOFRAMES>-Bereich können Sie eine vollständige HTML-Datei aufbauen. Auch wie in dem Schema mit <BODY>-Tag, es kann aber auch nur Klartext sein.

Die Notation von Alternativinformationen im <NOFRAMES>-Container kann schiefgehen (auch wenn fast alle HTML-Tools das Gerüst so generieren). So zeigt beispielsweise der Opera-Browser bei deaktivierten Frames1 dort notierten Text nicht an (obwohl eventuell dort notierte <BODY>-Anweisungen wie Hintergrundfarben umgesetzt werden). Man kann aber gefahrlos auf dem <NOFRAMES>-Bereich verzichten und einfach den Body direkt hinter den Frameset notieren. Browser, die Frames anzeigen, werden den Body-Bereich ignorieren, alle anderen sich so verhalten wie oben beschrieben. Noch sicherer ist es, sowohl im <NOFRAMES>-Bereich als auch dahinter die Zusatzinfos zu notieren (also zweimal). Ob dies in der Praxis aber notwendig ist, muss jeder für sich entscheiden.

Ein Frame muss nicht von vornherein etwas anzeigen. Es kann leer bleiben, bis dort Inhalt benötigt wird. Verzichtet man auf die Angabe eines Inhaltes über den <FRAME>-Tag, wird der Raum vom Browser neutral ausgefüllt. Sofern dies für alle Frames geschieht, erkennen Sie unter Umständen überhaupt keine Framestruktur im Browserfenster (bei entsprechender Konfiguration des Browsers - meist sind aber die Trennlinien zu sehen).

Wenn Sie Frames mit Inhalt angeben, spielt die Reihenfolge der Frame- Notierungen eine wichtige Rolle. Die erste Angabe wird automatisch im ersten Frame, die zweite Datei im zweiten Frame und so fort angezeigt.

Beispiel 8:

Erstellen Sie bitte nachfolgende HTML-Datei (Name der Datei Li.htm):

<HTML>
<BODY>
<H1>
<div align="center">
Links
</div>
</H1>
</BODY>
</HTML>

Erstellen Sie bitte auch die zweite HTML-Datei Re.htm:

<HTML>
<BODY>
<H1>
<div align="center">
Rechts
</div>
</H1>
</BODY>
</HTML>

Jetzt folgt unser eigentlicher Frameset (FS1.htm). Dabei werden wir ein vollständiges Alternativkonzept mit zweifachem Body-Bereich verwenden:

<HTML>
<FRAMESET cols="25%,75%">
<FRAME src= "Li.htm" name="links" >
<FRAME src= "Re.htm" name="rechts" >
</FRAMESET>
<NOFRAMES>
<BODY bgcolor=cyan>
<H1 align=center>
Sorry, hier werden Frames verwendet
</H1>
</BODY>
</NOFRAMES>
<BODY bgcolor=cyan>
<H1 align=center>
Sorry, hier werden Frames verwendet
</H1>
</BODY>
</HTML>

Abbildung 16.11:  Eine Frameaufteilung 1 zu 3

Im linken Frame wird die zuerst angegebene Datei Li.htm angezeigt, im rechten Frame die Datei Re.htm .

Abbildung 16.12:  Durch das Alternativkonzept werden die Alternativinfos angezeigt

Sie können auch andere Ressourcen als HTML-Dateien direkt referenzieren. Etwa Bilder (ohne umgebendes HTML-Gerüst). Dann müssen Sie nur den URL der jeweiligen Datei beim src-Attribut angeben. Sie können ebenso natürlich mehr als zwei Spalten oder Zeilen angeben. Beispiel für vier Reihen:

<FRAMESET rows="2%,2%,3%,5%">

Anstelle von Prozentangaben für die Größe von Frames können Sie Zahlenwerte benutzen, mit denen Sie tatsächliche Größen der Frames in Pixeln definieren. Dies erfolgt über die Angabe

rows="[Angabe in Pixel]",

bzw.

cols= "[Angabe in Pixel]").

Diese Größenangaben werden allerdings durch die Größe des Browser- Anzeigefensters wieder relativiert, d.h. die Frames werden wieder im angegebenen Verhältnis an das Anzeigefenster des Browsers angepasst. Sinn machen absolute Angaben nur, wenn sie mit so genannten Jokerzeichen, variable Angaben, verwendet werden. In Verbindung mit Jokerzeichen (der Stern, wie er auch sonst als Jokerzeichen üblich ist) bewirkt zum Beispiel

cols="300,*,200"

Beispiel 9:

Erstellen Sie die Datei FS2.htm:

<HTML>
<FRAMESET rows="200,*,100">
<FRAME src= "Li.htm" name="links" >
<FRAME src= "FS1.htm" name="mitte" >
<FRAME src= "Re.htm" name="rechts" >
</FRAMESET>
<NOFRAMES>
<BODY bgcolor=cyan>
<H1 align=center>
Sorry, hier werden Frames verwendet
</H1>
</BODY>
</NOFRAMES>
<BODY bgcolor=cyan>
<H1 align=center>
Sorry, hier werden Frames verwendet
</H1>
</BODY>
</HTML>

Abbildung 16.13:  Eine Frameaufteilung in Zeilen in der ersten Fenstergröße

Verändern Sie die Größe des Browsers.

Abbildung 16.14:  Die Frameaufteilung in der zweiten Fenstergröße

Im oberen Frame wird die zuerst angegebene Datei Li.htm angezeigt, im mittleren Frame die Datei FS1.htm und im unteren Frame die Datei Re.htm . Wenn Sie die Größe des Browserfensters verändern, wird die Größe der oberen und unteren Zeile fest bleiben, die mittlere Zeile füllt den restlichen Raum aus. Erst wenn die Gesamtgröße des Anzeigefensters zu klein wird, werden sich die beiden über Pixelwerte angegebenen Fenster auch verkleinern.

Im Zusammenhang mit prozentualen Angaben kann man das Jokerzeichen gleichfalls verwenden. Dort ist aber Vorsicht geboten, da sich dann die Relativbeziehungen von Prozentangaben durch das Jokerzeichen verändern. Es ist eigentlich unsinnig, hier mit Jokern zu arbeiten.

In dem letzten Beispiel habe ich Ihnen so ganz nebenbei eine Verschachtelung von Frames »untergejubelt«. In der mittleren Zeile ist das erste Frame-Beispiel mit einer spaltenweisen Framestruktur geladen worden, was eine Unterteilung dieses Frames in weitere zwei Frames bewirkt hatte. Dies kann beliebig fortgesetzt werden und ist theoretisch nur durch Plattformbeschränkungen begrenzt. Es macht aber jenseits von drei Ebenen selten Sinn.

Im Allgemeinen erfolgt die Verschachtelung von Frames nicht auf dem Weg, wie es in dem letzten Beispiel quasi nebenbei erfolgt ist. Es wird normalerweise innerhalb eines Framset-Containers ein darin verschachtelter Frameset-Container definiert werden. Die Verschachtelung erfolgt hierarchisch. Dabei ist offensichtlich, dass nur eine wechselweise Verschachtelung von Reihen und Spalten Sinn macht.

Beispiel 10:

Erstellen Sie die Datei FS3.htm:

<HTML>
<FRAMESET cols="30%,70%">
<FRAME src="li.htm">
<FRAMESET rows="30%,70%">
<FRAME src="131.gif">
<FRAME src="132.gif">
</FRAMESET>
</FRAMESET>
<NOFRAMES>
Ihr Browser unterstützt keine Frames!
</NOFRAMES>
</HTML>

Abbildung 16.15:  Eine verschachtelte Frame-Aufteilung


Das zweite Frame ist durch ein neues Frameset in zwei Zeilen unterteilt. Hier haben wir die Verschachtelung von Frameset-Containern. Die Einrückung des Quelltextes ist nicht willkürlich, sondern soll die Struktur der Verschachtelung deutlich machen. Auf die Darstellung hat die Einrückung keinen Einfluss, der Quelltext ist nur besser lesbar. In den beiden rechten Frames wird jeweils eine Grafik direkt referenziert.

Eigenschaften von Frames

Jedes Frame hat bestimmte Eigenschaften, die teilweise unabhängig von den anderen Frames des Framesets verändert werden können. Diese Festlegung der Eigenschaften erfolgt in der Regel im <FRAME>-Tag (wenn es ein einzelnes Frame betrifft) oder aber auch gelegentlich im <FRAMESET>- Tag (wenn es den gesamten Frameset betrifft) über optionale Attribute. Obwohl dies kein HTML-Buch ist, sollen ein paar Eigenschaften hier doch behandelt werden.

Jedes Frame zeigt standardmäßig unabhängig von den anderen Frames Bildlaufleisten an, wenn ein Inhalt nicht vollständig in ihm angezeigt werden kann. Diese Automatik lässt sich abschalten. Über den Parameter scrolling im <FRAME>-Tag legen Sie ausdrücklich fest, ob ein Frame automatisch mit Bildlaufleisten versehen werden soll oder nicht. Die Angabe

scrolling=no

unterdrückt Bildlaufleisten, auch wenn ein Inhalt nicht vollständig in das Frame passt. Die Angabe

scrolling=yes

erzwingt in jedem Fall Bildlaufleisten, sogar wenn es von der Größe des anzuzeigenden Inhaltes nicht notwendig wäre. Die Angabe

scrolling=auto

entspricht der Standardeinstellung (Bildlaufleisten wenn nötig, sonst nicht).

Falls Sie die Größenveränderung eines Frames durch den Anwender unterbinden wollen, steht Ihnen ein weiterer Parameter des <FRAMES>-Tag zur Verfügung -

noresize.

Der Parameter bedarf keiner weiteren Wertzuweisung und beeinflusst weitere Frames in derselben Reihe beziehungsweise Spalte, die dann an der Schnittstelle zu diesem Frame genauso wenig bewegt werden können. An der Verbindung von zwei Frames ohne den Parameter sind aber immer noch Verschiebungen der Framegröße möglich.

Frames werden standardmäßig mit einer Gitterstruktur angezeigt (die sichtbaren Ränder zwischen den einzelnen Frames). Dies stört oft das Layout, und Sie können diese Gitterlinien unterdrücken. Der Parameter frameborder im <FRAMESET>-Tag erlaubt die Unterdrückung. Mit der Angabe

frameborder=0

können Sie die Gitterlinien ausschalten.

Beispiel 11:

Erstellen Sie die Datei FS4.htm:

<HTML>
<FRAMESET cols="30%,70%">
<FRAME src="li.htm">
<FRAMESET rows="30%,70%">
  <FRAME src="131.gif">
  <FRAMESET cols="50%,50%,50%" frameborder=0>
    <FRAME src= "li.htm" noresize>
    <FRAMESET rows="50%,50%">
      <FRAME src= "132.gif">
      <FRAME src= "132.gif">
    </FRAMESET>
    <FRAME src= "131.gif" scrolling=no>
  </FRAMESET>
<FRAME src="132.gif">
</FRAMESET>
</FRAMESET>
<NOFRAMES>
Ihr Browser unterstützt keine Frames!
</NOFRAMES>
</HTML>

Abbildung 16.16:  Eine mehrfach verschachtelte Frame-Aufteilung - teilweise ohne Linien

Was fällt Ihnen auf? Erst Mal ist die Framestruktur in dem Beispiel mehrfach verschachtelt und es werden einige Dateien gleich mehrfach im mehreren Frames geladen. Das ist selbstverständlich erlaubt. Aber es gibt mehr zu beachten. Versuchen Sie die Größe der Frames zu verändern. Die Frames lassen sich nicht in der Größe verändern. Dies bewirkt die Angabe noresize. Zwischen den Frames im Bereich links unten werden Sie keine Gitterlinie finden. Dies bewirkt die Angabe frameborder=0. Damit können Sie auch die Höhe der beiden Zeilen nicht mehr verändern, denn es steht kein Bereich zur Verfügung, wo der Mauszeiger zum Ziehen platziert werden kann.

Wenn Sie das Fenster ganz klein machen, wird das ganz rechts unten angeordnete Frame selbst dann keine Bildlaufleisten anzeigen, wenn der Inhalt nicht ganz zu sehen ist (scrolling=no).

Abbildung 16.17:  Rechts unten fehlen die Bildlaufleisten

Verweise zu anderen Frames

Wir haben bisher noch kein einziges Mal den Parameter name verwendet. Mal war er da, mal nicht. Er schien überhaupt keinen Zweck zu haben. Jetzt aber werden wir ihn brauchen. Er hilft bei Verweisen zu anderen Frame-Inhalten. Normalerweise werden innerhalb einer Framestruktur Folgeseiten von Links in dem gleichen Frame angezeigt, von dem aus sie vom Benutzer aufgerufen werden. Sie können aber auch direkt bestimmte Frames adressieren und damit explizit festlegen, wo dieser neue Inhalt angezeigt werden soll. Über den mit dem Parameter name definierten Namen. Dieser Name wird im Link selbst über einen weiteren Parameter angegeben - target. Über eine Zuweisung wird in Anführungszeichen der Name angegeben.

Es können sowohl im Frameset vergebene Namen als auch die reservierten Fensternamen adressiert werden. Sofern der Framename in einem fremden Projekt bekannt ist, kann natürlich ebenso dieser notiert werden.

Beispiel 12:

Erstellen Sie zuerst die folgenden zwei HTML-Dateien (die Datei Bild1.htm haben wir noch von dem ersten Beispiel) - Datei Bild2.htm:

<HTML>
<BODY>
<IMG src="132.gif">
</BODY>
</HTML>

Datei Bild3.htm:

<HTML>
<BODY>
<IMG src="133.gif">
</BODY>
</HTML>

Erstellen Sie als Nächstes die Frameset-Datei FS5.htm:

<HTML>
<FRAMESET cols="30%,70%">
<FRAME src="Hyper.htm">
<FRAMESET rows="1%,1%,1%">
<FRAME src="bild1.htm" name="eins">
<FRAME src="bild2.htm" name="zwo">
<FRAME src="bild3.htm" name="drei">
</FRAMESET>
</FRAMESET>
<NOFRAMES>
Ihr Browser unterstützt keine Frames!
</NOFRAMES>
</HTML>

Die nächste Datei Hyper.htm wird diejenige, wo die Hyperlinks notiert werden. Diese verwenden die in der Frameset-Datei angegebenen Namen. Die Datei wird im Frameset in der linken Spalte geladen:

<HTML>
<BODY>
<A href="bild1.htm" target="zwo">
Bild 1 in die Mitte
</A>
<BR>
<A href="bild1.htm" target="eins">
Bild 1 nach oben
</A>
<BR>
<A href="bild1.htm" target="drei">
Bild 1 nach unten
</A>
<BR>
<A href="bild2.htm" target="zwo">
Bild 2 in die Mitte
</A>
<BR>
<A href="bild2.htm" target="eins">
Bild 2 nach oben
</A>
<BR>
<A href="bild2.htm" target="drei">
Bild 2 nach unten
</A>
<BR>
<A href="bild3.htm" target="zwo">
Bild 3 in die Mitte
</A>
<BR>
<A href="bild3.htm" target="eins">
Bild 3 nach oben
</A>
<BR>
<A href="bild3.htm" target="drei">
Bild 3 nach unten
</A>
<BR>
</BODY>
</HTML>

Die Datei mit den Hyperlinks erlaubt das Laden jeder unserer drei Bilddateien in jedem der Frames auf der rechten Seite. Laden Sie die Datei FS5.htm und testen Sie die Links.

Abbildung 16.18:  Umsortierung

Abbildung 16.19:  Die Anordnung beim Laden des Framesets

Die target-Angabe _top (einer der reservierten Fensternamen) sollte immer dann zu einem Verweis gehören, wenn ein Link zu Seiten erfolgt, die nicht zu Ihrem Projekt gehören. Ansonsten erscheinen bei einem Besucher Ihrer Seiten unter Umständen auch die Folgeseiten von anderen Projekten in der von Ihnen definierten Framestruktur.

JavaScript auf Frames anwenden

Natürlich können Sie mit JavaScript auf Frames zugreifen und diese beeinflussen. Dazu steht Ihnen das Objekt frame zur Verfügung. Über das Objekt frame - einem Unterobjekt von window - haben Sie vollen Zugriff auf Frames, die in einer HTML-Datei definiert sind.

Eine Objektinstanz von frame wird automatisch erzeugt, wenn der Browser ein Frameset in einer HTML-Datei vorfindet. Die Instanz wird in einem Objektfeld mit Namen frames (beachten Sie wieder das s) gespeichert. Das erste Frame ist also über das Objekt frames[0], das zweite über frames[1] usw. aus JavaScript heraus erreichbar. Die Frame-Objekte stehen in der Datei zur Verfügung, in der das Frameset definiert wird sowie in allen Dateien, die in einem Frame-Fenster des Framesets angezeigt werden.

Eine Instanz eines frame-Objekts können Sie nicht nur über den Index des zugeordneten Objektfeldes ansprechen, sondern ebenso über den Namen des Frame-Fensters, wie er in der HTML-Frameset-Seite angegeben wurde.

Da frames window untergeordnet ist, kann ein jedes Frame samt seiner Eigenschaften und Methoden direkt über die Punktnotation angesprochen werden. Entweder über

frames[n].[Eigenschaft/Methode()]

oder

[FrameName].[Eigenschaft/Methode()].

Wie beim Objekt window schon erwähnt gibt es für Frames reservierte Schlüsselwörter für Fensterreferenzen, über die Sie vorhandene Frames ansprechen können. Über parent können Sie innerhalb eines Frame-Projekts den Namen des obersten Fensters, in dem das Frameset definiert wurde, ansprechen. Einen ähnlichen Zweck hat die Angabe top. Sie bezeichnet im Falle von Frames in den meisten Fällen dasselbe Frame wie parent. Bei Verschachtelungseffekten können Sie mit top das oberste Frame direkt ansprechen. Letzteres ist meistens der Fall, denn wenn Sie aus einem Frame heraus agieren, müssen Sie in der Regel über die oberste Ebene den Zugriff steuern.

Die Eigenschaften und Methoden von frame

Das frame-Objekt wird in JavaScript nur als (besonderes) window-Objekt gesehen und hat dementsprechend alle Methoden und Eigenschaften eines solchen. Dennoch, es gibt kleine Unterschiede, die sich aus dem Kontext eines Frames ergeben und die Funktionalität von Eigenschaften und Methoden einschränken (innerhalb vonn einem Frameset und nicht unabhängig von anderen Frames dort). Das frame-Objekt besitzt zusätzlich die nachfolgenden Eigenschaften:

Eigenschaft

Beschreibung

length

Die Angabe der Anzahl der Frames in einem Frameset

name

Bei einem Frame der Name eines Frame-Fensters

Tabelle 16.5: Eigenschaften von frame

Das Objekt frame erbt als Unterobjekt von window dessen Methoden und stellt keine weiteren zur Verfügung.

Beispiel 13:

Eine der interessantesten Anwendungen von JavaScript in Zusammenhang mit Frames ist das gleichzeitige Aktualisieren von mehreren Frames mit einem Mausklick. Das wollen wir im nachfolgenden Beispiel machen. Dazu überarbeiten wir unser Beispiel 11 entsprechend. Zuerst brauchen wir eine etwas veränderte Frameset-Datei (FSJS1.htm):

<HTML>
<FRAMESET cols="30%,70%">
<FRAME src="HyperJS.htm">
<FRAMESET rows="1%,1%,1%">
<FRAME src="bild1.htm" name="eins">
<FRAME src="bild2.htm" name="zwo">
<FRAME src="bild3.htm" name="drei">
</FRAMESET>
</FRAMESET>
<NOFRAMES>
Ihr Browser unterstützt keine Frames!
</NOFRAMES>
</HTML>

Dann überarbeiten wir die Datei mit den Links (HyperJS.htm). Dabei sprechen wir in den open()-Anweisungen die einzelnen Frames über den im Frameset definierten Namen an:

<HTML>
<HTML>
<SCRIPT language="JavaScript">
function a()
{
open("bild1.htm","eins");
open("bild2.htm","zwo");
open("bild3.htm","drei");
}
function b()
{
open("bild3.htm","eins");
open("bild1.htm","zwo");
open("bild2.htm","drei");
}
function c()
{
open("bild2.htm","eins");
open("bild3.htm","zwo");
open("bild1.htm","drei");
}

</SCRIPT>
<BODY>
<A href="JavaScript:a()">
Permutation 1
</A>
<BR>
<A href="JavaScript:b()">
Permutation 2
</A>
<BR>
<A href="JavaScript:c()">
Permutation 3
</A>
<BR>
</BODY>
</HTML>

Laden Sie die Frameset-Datei und testen Sie die Links. Es werden immer alle drei Frames gleichzeitig aktualisiert.

Abbildung 16.20:  Umsortierung nach einem Klick

Abbildung 16.21:  Die Anordnung beim Laden des Framesets

Vielleicht denken Sie, dass man auch so etwas machen kann, wie eine Seite per HTML-Hyperlink aufrufen, und diese lädt dann automatisch per <META>-Tag eine weitere Seite. Ich muss Sie enttäuschen. Das ist nicht möglich. Der <META>-Tag arbeitet nicht mit der target-Angabe zusammen.

Das zweite Beispiel zum Einsatz von JavaScript und Frames verwendet die Eigenschaft name, indem diese in einer Datei ausgegeben wird. Die Abfrage erfolgt diesmal explizit über die Objektfelder frames[], wobei beachtet werden sollte, dass man von top aus agieren muss.

Beispiel 14:

Zuerst brauchen wir wieder eine neue Frameset-Datei (FSJS2.htm):

<HTML>
<FRAMESET cols="30%,70%">
<FRAME src="info.htm" name="info">
<FRAMESET rows="1%,1%,1%">
<FRAME src="bild1.htm" name="eins">
<FRAME src="bild2.htm" name="zwo">
<FRAME src="bild3.htm" name="drei">
</FRAMESET>
</FRAMESET>
<NOFRAMES>
Ihr Browser unterstützt keine Frames!
</NOFRAMES>
</HTML>

Beachten Sie, dass jetzt alle Frames das HTML-Attribut name gesetzt haben. Als neue Datei erstellen wir die Datei Info.htm:

<HTML>
<HTML>
<SCRIPT language="JavaScript">
function welcheFrames()
{
document.write("<H2>Die geladenen Framenamen</H2>");
document.write(top.frames[0].name);
document.write("<BR>");
document.write(top.frames[1].name);
document.write("<BR>");
document.write(top.frames[2].name);
document.write("<BR>");
document.write(top.frames[3].name);
}
</SCRIPT>
<BODY onLoad="welcheFrames()">
</BODY>
</HTML>

Laden Sie die Frameset-Datei. Die in der Frameset-Datei angegebenen Namen werden im linken Frame ausgegeben.

Abbildung 16.22:  Die Anordnung beim Laden des Framesets

Morgen werden wir noch ein weiteres Beispiel mit Frames durchspielen. Dort wird direkt aus einer in einem Frame geladenen Datei in ein anderes Frame geschrieben.

Zusammenfassung

Am heutigen Tag haben wir mit dem window-Objekt und seinem eng verwandten Unterobjekt frame wichtige Objekte durchgesprochen, die in nahezu allen JavaScripten eine Rolle spielen. Das Objekt window ist auf der obersten Objektebene in der Objekthierarchie angesiedelt und beinhaltet alle diejenigen Objekte als Unterobjekte, die mit der Anzeige von Informationen im Browser irgendetwas zu tun haben. Das Objekt window steht über das Hauptanzeigefenster eines Browsers immer zur Verfügung. Zusätzliche Instanzen des Objekts window werden in der Regel mit der window-Methode open() erzeugt. Das Objekt stellt viele der Methoden bereit, die wir in den vorherigen Tagen einfach verwendet haben. Von alert() über prompt() hin zu confirm().

Über das Objekt frame haben Sie Kontrolle über Frames, einer Technik zur Aufteilung des Anzeigebereichs eines Browsers in einzelne Segmente, die unabhängig von einander mit Inhalt gefüllt werden können. JavaScript erlaubt den gezielten Zugriff auf jedes einzelne Frame. Die Frame- Technologie besteht einmal aus den Frames selbst, welchen den Anzeigebereich des Browsers gliedern und dennoch eigenständige Fenster mit allen HTML-Darstellungmöglichkeiten bilden. Diese einzelnen Frames sind zusammen in einer umgebenden Struktur - dem so genannten Frameset - enthalten. Diese Frameset-Datei ist diejenige, welche in den Browser geladen wird. Sie enthält nur Informationen über Namen, Größe und Position der einzelnen im Anzeigefenster enthaltenen Frames. Insbesondere ist der eigentliche Inhalt der Frames nicht in der Frameset- Datei notiert. Eine HTML-Datei, welche als Frameset-Datei für eine Frame- struktur verwendet werden soll, hat einen anderen Aufbau als eine gewöhnliche HTML-Datei. Es wird vor allen Dingen kein <BODY>-Tag mehr benötigt. Dessen Funktion wird von dem <FRAMESET>-Container übernommen. Der Zugriff auf Frames aus JavaScript auf Frames erfolgt über das Objekt frame. Eine Objektinstanz von frame wird automatisch erzeugt, wenn der Browser ein Frameset in einer HTML-Datei vorfindet. Die Instanz wird in einem Objektfeld mit Namen frames gespeichert. Eine Instanz eines frame-Objekts können Sie nicht nur über den Index des zugeordneten Objektfeldes ansprechen, sondern ebenso über den Namen des Frame-Fensters, wie er in der HTML-Frameset-Seite angegeben wurde.

Fragen und Antworten

Frage:
Das window-Objekt hat neben frame noch zahlreiche Unterobjekte. Was ist mit diesen?

Antwort:
Wir werden die anderen Objekte wie location, history oder document die nächsten Tage genauer behandeln.

Frage:
Die Browser verhalten sich bei der Festlegung von Größe oder Position von Fenstern nicht immer gleich. Wie kann man dem begegnen?

Antwort:
Trennen der Browser-Welten. Es ist aus zahlreichen Gründen unabdingbar, die unterschiedlichen Browser mit verschiedenen Webseiten, Scripten und Style Sheets zu bedienen, wenn man etwas über einfaches HTML hinaus geht. Wir werden auch das in den nächsten Tagen behandeln.

Frage:
Gibt es zu der open()-Methode noch eine Alternative?

Antwort:
Ja. Sie können mit dem location-Objekt - einem Unterobjekt von window - arbeiten. Bitte im Chor ;-) - darauf gehen wir noch in den nächsten Tagen ein.

Workshop

Experimentieren Sie mit den Beispielen in dem Kapitel. Lassen Sie sich beispielsweise den Namen des Folgefensters in Beispiel 1 per JavaScript ausgeben. Oder verändern Sie Werte von Variablen, Dateien usw.

Nutzen Sie bei der open()-Methode die in den Beispielen nicht verwendeten Optionen. Testen Sie ebenso die in den Beispielen nicht verwendeten Methoden und Eigenschaften.

Versuchen Sie in den Beispielen der vorherigen Tage die Methoden zu finden, welche zu window gehören. Wie wurden sie eingesetzt?

Kontrollfragen

Im Anhang »Antworten zu den Kontrollfragen« finden Sie die Antworten zu den jeweils am Ende einer Lektion notierten Fragen.

  1. Was ist der Unterschied zwischen frame und frames[]?
  2. Geht das?
    open("","");
  3. Welcher Browser reagiert bei self.close(); mit einer Warnmeldung - der Navigator oder der Internet Explorer?
  4. Stimmt das?
    <FRAMESET rows="55%,1%,1%,5%">
  5. Was stimmt hier nicht?
    open("bild1.htm", 
    "DiesistkeinleeresFenster",
    "width=300;
    height=250;
    screenX=100;
    screenY=100");
  6. Für was steht self?
  7. Was macht die Methode home()?
  8. Stimmt das?
    <FRAMESET cols="25%,75%">
    <FRAME src= "Li.htm" name="links" >
    <FRAME src= "Re.htm" name="rechts" >
    </FRAMESET>


  9. Versuchen Sie den Fehler zu finden:
    <FRAMESET  cols="30%,70%">
    <FRAME src="li.htm">
    <FRAMESET rows="30%,70%">
        <FRAME src="131.gif">
      <FRAMESET cols="50%,50%,50%" frameborder=0>
        <FRAME src= "li.htm" noresize>
        <FRAMESET cols="50%,50%">
          <FRAME src= "132.gif">
          <FRAME src= "132.gif">
        </FRAMESET>
        <FRAME src= "131.gif" scrolling=no>
      </FRAMESET>
    <FRAME src="132.gif">
    </FRAMESET>
    </FRAMESET>



vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbackKapitelanfangnächstes Kapitel


1

© Markt+Technik Verlag, ein Imprint der Pearson Education Deutschland GmbH