SELFHTML/Navigationshilfen JavaScript/DOM Objektreferenz | |
window |
|
window: Allgemeines zur Verwendung Eigenschaften:
closed (geschlossenes Fenster) Methoden:
alert() (Dialogfenster mit Infos) Unterobjekte: |
|
Das Objekt window
(Fenster) ist das oberste Objekt der Objektfamilie für alles, was im Browser-Fenster angezeigt wird. Über das Objekt window
können Sie das Dokumentfenster abfragen und kontrollieren. Ferner können Sie neue Fenster definieren. Dabei können Sie auch die Fenstereigenschaften frei bestimmen.
Das aktuelle Fenster des Web-Browsers können Sie über die Objekte window
oder self
ansprechen. Auf die Objekte window
und self
lassen sich alle Eigenschaften und Methoden des window-Objekts anwenden.
<html><head><title>Test</title> <script type="text/javascript"> window.defaultStatus = "Meine Homepage"; </script> </head><body> </body></html>
Das Beispiel belegt die ständige Anzeige der Statuszeile des aktuellen Anzeigefensters mit dem Wert "Meine Homepage"
. Dazu wird die Fenstereigenschaft defaultStatus aufgerufen.
window
oder self
können auch weggelassen werden. So hat window.moveTo(200,100)
die gleiche Wirkung wie moveTo(200,100)
. Der Übersichtlichkeit halber ist es jedoch besser, den vordefinierten Objektnamen mit anzugeben.
Auch Frame-Fenster innerhalb eines Frame-Sets stellen aus Sicht von JavaScript eigene Fenster dar. Lesen Sie dazu jedoch den Abschnitt über das Objekt frames.
Sie können mit Hilfe von JavaScript nicht nur vorhandene Fenster ansprechen, sondern auch neue Fenster erzeugen und diese mit Hilfe von Variablen ansprechen.
<html><head><title>Test</title> <script type="text/javascript"> function FensterOeffnen (Adresse) { MeinFenster = window.open(Adresse, "Zweitfenster", "width=300,height=200,scrollbars=yes"); MeinFenster.focus(); } </script> </head><body> <a href="datei2.htm" onclick="FensterOeffnen(this.href); return false">Neues Fenster</a> </body></html>
Die Beispieldatei enthält einen Verweis. Beim Anklicken dieses Verweises wird die JavaScript-Funktion FensterOeffnen()
aufgerufen. Diese Funktion öffnet ein neues, kleines Browser-Fenster und zeigt darin die Datei datei2.htm an. Eine genauere Erklärung sowie weitere Einzelheiten zum Öffnen neuer Fenster werden bei der Methode open() beschrieben. Ein solches Fenster ist nach dem Erzeugen mit der Variablen ansprechbar, in der die Fensterinstanz gespeichert ist. Im Beispiel ist das die Variable MeinFenster
. Über diesen Instanznamen können Sie alle Eigenschaften und Methoden des erzeugten Fensters ansprechen.
<a href="javascript:MeinFenster.close()">Fenster zumachen</a>
Im Beispiel wird das zuvor geöffnete Fenster beim Klicken auf den Verweis wieder geschlossen. Zuständig dafür ist die Methode close(). Das Fenster wird dabei mit seinem Instanznamen angesprochen, im Beispiel also mit dem Namen der Variablen MeinFenster
, mit der es zuvor erzeugt wurde.
Bei der Variablen MeinFenster
handelt es sich um eine globale Variable. Diese wurde erzeugt durch eine Deklaration der Variablen ohne das Schlüsselwort var
. Die Deklaration als globale Variable ermöglicht es Ihnen, dieses Fenster auch außerhalb der erzeugenden Funktion anzusprechen.
Genau so, wie Sie vom Hauptfenster auf ein mit open()
erzeugtes Zweitfenster zugreifen können, können Sie aus einem solchen Zweitfenster auf das Hauptfenster zugreifen. Dazu gibt es das Fensterobjekt opener
. Damit wird das Fenster angesprochen, von dem aus das aktuelle Fenster geöffnet wurde. Über das Objekt opener
können Sie alle Eigenschaften und Methoden des öffnenden Fensters ansprechen.
<a href="javascript:opener.close()">Hauptfenster zumachen</a>
Notieren Sie nach opener
einen Punkt und danach die gewünschte Methode oder Eigenschaft.
Speichert, ob ein Fenster, das zum Beispiel mit open()
neu geöffnet wurde, mittlerweile geschlossen wurde. Hat den Wert true
, wenn das Fenster geschlossen wurde. Sinnvoll, um die Existenz eines Fensters abzufragen, bevor Anweisungen zum Verändern eines Fensters folgen.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> <script type="text/javascript"> var InfoWin = window.open("datei1.htm", "Zweitfenster"); function CheckOpen () { if (InfoWin.closed == true) { alert("Fenster wurde geschlossen"); } else { alert("Fenster noch offen"); } } </script> </head><body> <a href="javascript:CheckOpen()">Fenster zu?</a> </body></html>
Das Beispiel lädt beim Einlesen ein Zweitfenster mit einer anderen Datei datei1.htm
. Beim Klicken auf den Verweis wird eine Funktion CheckOpen()
aufgerufen, die ausgibt, ob das andere Fenster noch offen ist oder nicht.
Speichert den Inhalt der Statuszeile, der solange angezeigt wird, wie kein besonderes Ereignis eintritt (etwa das Überfahren eines Verweises mit der Maus).
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> <script type="text/javascript"> window.defaultStatus = "Helmuts Homepage"; </script> </head><body> <p>Achten Sie auf die Statuszeile</p> </body></html>
Das Beispiel belegt beim Einlesen der Datei die normale Anzeige der Statuszeile mit dem Wert Helmuts Homepage
.
Konqueror setzt die Wertzuweisung im Beispiel prinzipiell um, überschreibt aber kurze Zeit später den Text wieder mit "Seite geladen". Die Zuweisung muss daher nach dem Laden der Seite erfolgen, damit der Text in der Statuszeile dauerhaft bleibt. Safari entfernt den Statustext nach Bewegen des Mauszeigers. Beachten Sie ferner, dass Konqueror, Firefox und Opera Einstellungen anbieten, die das Beschreiben der Statusleiste für Scripte unmöglich machen.
Speichert die Höhe des Anzeigebereichs eines Fensters.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> <script type="text/javascript"> window.innerHeight = 300; </script> </head><body> </body></html>
Das Beispiel setzt beim Einlesen der Datei den Anzeigebereich des Fensters auf eine Höhe von 300 Pixel fest.
Beachten Sie beim Neufestsetzen der Fensterhöhe die Bildschirmgröße. Diese können Sie mit dem screen-Objekt ermitteln. Beachten Sie auch, dass der Anzeigebereich eines Fensters um einiges kleiner sein muss als das Fenster selbst, da das Fenster in der Regel noch Elemente wie Titelleiste, Menüleiste usw. enthält. Die absolute Höhe eines Fensters können Sie mit outerHeight auslesen bzw. setzen.
Unter Opera, Konqueror und Safari können Sie die Eigenschaft innerHeight
nur auslesen, jedoch nicht setzen.
Im Internet Explorer können Sie mit document.body.clientHeight
die innere Fensterhöhe bestimmen. Wenn Sie eine Dokumenttyp-Deklaration einsetzen, die im Internet Explorer 6 den standardkonformen Modus auslöst, müssen Sie
document.documentElement.clientHeight
statt document.body.clientHeight
verwenden. Zu diesem Zeitpunkt muss jedoch das body
- bzw. html
-Element bereits vorhanden sein, d.h. es ist sinnvoll, die Ermittlung dieser Eigenschaften vom Event-Handler onload abhängig zu machen.
Ein fertiges Script zum Auslesen der Größe des Anzeigebereichs des Fensters, das alle Browser und Anzeigemodi berücksichtigt, finden Sie auf quirksmode.org.
Speichert die Breite des Anzeigebereichs eines Fensters. Sehr gut geeignet in Verbindung mit absolutem Positionieren von Elementen.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> <script type="text/javascript"> function BreiteFestlegen () { window.innerWidth = document.Eingabe.Feld.value; } </script> </head><body> <form name="Eingabe" action=""> <input type="text" name="Feld"> <input type="button" value="Test" onclick="BreiteFestlegen()"> </form> </body></html>
Das Beispiel erlaubt es, in einem Eingabefeld einen Wert einzugeben. Beim Klicken auf einen ebenfalls definierten Button wird die Funktion BreiteFestlegen()
aufgerufen, die die Fensterbreite auf den eingegebenen Wert setzt.
Beachten Sie beim Neufestsetzen der Fensterbreite die Bildschirmgröße. Diese können Sie mit dem Screen-Objekt ermitteln. Beachten Sie auch, dass der Anzeigebereich eines Fensters um einiges kleiner sein muss als das Fenster selbst, da das Fenster in der Regel noch Elemente wie Titelleiste, Menüleiste usw. enthält. Die absolute Breite eines Fensters können Sie mit outerWidth auslesen bzw. setzen.
Unter Opera, Konqueror und Safari können Sie die Eigenschaft innerWidth
nur auslesen, jedoch nicht setzen.
Im Internet Explorer können Sie mit document.body.clientWidth
die innere Fensterhöhe bestimmen. Wenn Sie eine Dokumenttyp-Deklaration einsetzen, die im Internet Explorer 6 den standardkonformen Modus auslöst, müssen Sie
document.documentElement.clientWidth
statt document.body.clientWidth
verwenden. Zu diesem Zeitpunkt muss jedoch das body
- bzw. html
-Element bereits vorhanden sein, d.h. es ist sinnvoll, die Ermittlung dieser Eigenschaften vom Event-Handler onload abhängig zu machen.
Ein fertiges Script zum Auslesen der Größe des Anzeigebereichs des Fensters, das alle Browser und Anzeigemodi berücksichtigt, finden Sie auf quirksmode.org.
Speichert, ob ein Fenster eine eigene Adresszeile hat. Stellt selbst ein Objekt dar, das eine Eigenschaft hat, nämlich die Eigenschaft visible
(= sichtbar). Enthält für diese Eigenschaft den Wert true
, wenn das Fenster eine Adresszeile hat, und den Wert false
, wenn es keine hat.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> <script type="text/javascript"> function FensterOeffnen () { Fenster = window.open("datei.htm", "Zweitfenster1", "width=300,height=200"); if (Fenster.locationbar) { if (Fenster.locationbar.visible == false) { Fenster.close(); Neufenster = window.open("datei.htm", "Zweitfenster2", "width=300,height=200,location=yes"); Neufenster.focus(); } } else { alert("Ihr Browser gibt nicht Preis, ob das neue Fenster eine Adressleiste hat."); } } </script> </head><body> <p><a href="javascript:FensterOeffnen()">Fenster öffnen</a></p> </body></html>
Das Beispiel definiert eine Funktion FensterOeffnen()
, die beim Aktivieren des Verweises aufgerufen wird. Diese Funktion öffnet zunächst ein Zweifenster ohne Adressleiste. Anschließend prüft sie, ob der Browser das Objekt locationbar
kennt und ob das Fenster keine Adresszeile hat. Wenn es keine hat, wird es geschlossen. Stattdessen wird ein neues Fenster mit der zusätzlichen Angabe location=yes
geöffnet. Näheres dazu siehe open().
Mozilla Firefox 1.0 kennt das Objekt window.locationbar
zwar, die visible
-Eigenschaft liefert jedoch in den meisten Fällen unbrauchbare Werte, die nicht wiederspiegeln, ob eine Adressleiste zu sehen ist oder nicht. Nur bei mit window.open() geöffneten Fenstern liefert visible
korrekte Werte. Aber auch dabei gibt es - wenn auch selten vorkommende - Ausnahmen: Wenn die Adressleiste standardmäßig ausgeschaltet ist und Sie ein Fenster mit der Eigenschaft location=yes
öffnen, so zeigt Firefox trotzdem keine Adressleiste, gibt aber fälschlicherweise true
für window.locationbar.visible
zurück. Sie sollten sich daher nicht auf diese Eigenschaft verlassen.
Speichert, ob ein Fenster eine eigene Menüleiste mit den Browser-Menübefehlen hat. Stellt selbst ein Objekt dar, das eine Eigenschaft hat, nämlich die Eigenschaft visible
(= sichtbar). Enthält für diese Eigenschaft den Wert true
, wenn das Fenster eine Menüleiste hat, und den Wert false
, wenn es keine hat.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> <script type="text/javascript"> function Hinweis () { if (window.menubar) { if (window.menubar.visible == true) { alert("Um die Seite zu editieren, wählen Sie aus dem Menü 'Ansicht'" + " den Befehl 'Quelltext anzeigen'."); } else { alert("Nanu, Ihr Browserfenster besitzt keine Menüleiste? Klicken Sie " + "mit der rechten Maustaste auf das Dokument und wählen dort 'Quelltext anzeigen', "+ "um die Seite zu editieren."); } } else { alert("Es lässt sich nicht feststellen, ob ihr Browserfenster eine Menüleiste " + "hat. Probieren Sie im Menü 'Ansicht' den Befehl 'Quelltext anzeigen', " + "um die Seite zu editieren. Wenn Sie keine Menüleiste finden, klicken Sie mit " + "der rechten Maustaste auf das Dokument und wählen dort 'Quelltext anzeigen'."); } } </script> </head><body> <a href="javascript:Hinweis()">Diese Seite editieren</a> </body></html>
Das Beispiel enthält einen Verweis, der dem Anwender anbietet, die angezeigte Seite zu editieren. Wenn der Verweis aktiviert wird, wird eine Funktion Hinweis()
aufgerufen. Diese prüft, ob der Browser das Objekt menubar
kennt und ob für das aktuelle Fenster eine Menüleiste verfügbar ist. Je nachdem, welcher Fall zutrifft, gibt die Funktion mit alert() verschiedene Hinweis aus, die dem Anwender erklären, was zu tun ist, um die Seite zu editieren.
Speichert den Namen eines Fensters. Bei Netscape 2.0 nur auslesbar, ab späteren Versionen auch änderbar.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> <script type="text/javascript"> Fenster = window.open("datei.htm", "KleinesFenster", "width=200,height=200"); function Fenstername () { alert("Name des kleinen Fensters: " + Fenster.name); neu = prompt("Vergeben Sie einen neuen Fensternamen", "Name"); Fenster.name = neu; alert("Der Name des Fensters lautet jetzt: " + Fenster.name); } </script> </head><body> <a href="javascript:Fenstername()">Name des Fensters</a> </body></html>
Das Beispiel lädt beim Einlesen der Datei ein zweites kleines Fenster. Der Name dieses Fensters lautet KleinesFenster
. Beachten Sie, dass die Eigenschaft name
sich auf diesen Namen bezieht, nicht etwa auf den Variablennamen, in dem die Fensterinstanz gespeichert wird (im Beispiel die Variable Fenster
). Beim Klicken auf einen Verweis wird die Funktion Fenstername()
aufgerufen. Darin wird dem Anwender zunächst mit alert() der aktuelle Fenstername des kleinen Fensters ausgegeben. Dann kann er einen neuen Namen eingeben. Abschließend wird der neue Name angezeigt.
Ein mit JavaScript gesetzter Fenstername bleibt solange erhalten, wie das Fenster geöffnet ist bzw. bis er erneut geändert wird. Sie können aus diesem Grund den Fensternamen zum Speichern von Variableninhalten verwenden, z.B., um Variablen von einer Datei an eine später aufgerufene Datei zu übergeben. Berücksichtigen Sie dabei jedoch, dass der Fenstername in vielen Browsern lediglich Buchstaben, Zahlen und den Unterstrich enthalten darf. Sonderzeichen und Umlaute dagegen sind nicht erlaubt. Eine Ausnahme bildet Opera 5. Hier bleibt ein mit JavaScript gesetzter Fenstername nur solange gültig, wie das ändernde Dokument in diesem Fenster geladen ist.
Lesen Sie zu dem Thema auch im Online-Angebot von SELFHTML aktuell den Artikel Javascript-Wertübergabe zwischen verschiedenen HTML-Dokumenten von Hatto von Hatzfeld.
Speichert die Gesamthöhe eines Fensters inklusive Titelleiste, Menüleiste, Statuszeile usw.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> <script type="text/javascript"> alert("Gesamthoehe dieses Fensters: " + window.outerHeight + " Pixel"); window.outerHeight = 300; alert("Gesamthoehe jetzt: " + window.outerHeight + " Pixel"); </script> </head><body> </body></html>
Das Beispiel gibt beim Einlesen zunächst die Höhe des aktuellen Fensters aus. Dann setzt es die Höhe neu fest, und zwar auf 300 Pixel. Anschließend wird die neue Fensterhöhe zur Kontrolle mit alert() nochmals ausgegeben.
Unter Opera, Konqueror und Safari können Sie die Eigenschaft outerHeight
nur auslesen, jedoch nicht setzen.
Speichert die Gesamtbreite eines Fensters inklusive Fensterrändern.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> <script type="text/javascript"> if (window.outerWidth > 640) window.outerWidth = 640; </script> </head><body> </body></html>
Das Beispiel fragt beim Einlesen der Datei ab, ob die Breite des aktuellen Fensters mehr als 640 Pixel beträgt. Wenn ja, wird die Breite auf 640 Pixel festgesetzt.
Unter Opera, Konqueror und Safari können Sie die Eigenschaft outerWidth
nur auslesen, jedoch nicht setzen.
Speichert die aktuelle horizontale Position innerhalb der Seite, gemessen am linken Fensterrand. So lässt sich ermitteln, wie weit der Anwender bereits nach rechts gescrollt hat. Sinnvoll in Verbindung der Verwendung mit scrollBy() oder scrollTo().
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> <script type="text/javascript"> function Set0 () { if (parent.frames[1].pageXOffset > 0) parent.frames[1].scrollTo(0, parent.frames[1].pageYOffset); } </script> </head><body> <a href="javascript:Set0()">nach links</a> </body></html>
Im Beispiel wird angenommen, es gibt ein anderes Frame-Fenster, das einen überbreiten Inhalt hat, sodass der Anwender nach rechts scrollen muss, um alles zu sehen. Mit dem Verweis, der in der aktuellen Datei notiert ist, lässt sich das andere Frame-Fenster wieder ganz nach links scrollen. Dazu wird die aktuelle horizontale Scroll-Position der Eigenschaft pageXOffset
abgefragt. Wenn sie größer 0 ist, hat der Anwender nach rechts gescrollt. In diesem Fall wird die Methode scrollTo() aufgerufen, um wieder ganz nach links zu scrollen. Die vertikale Position bleibt dabei erhalten, da als Parameter die Eigenschaft pageYOffset übergeben wird.
Zur Adressierung von Frame-Fenstern in JavaScript lesen Sie den Abschnitt über das Objekt frames.
Im Internet Explorer ab Version 4 ist die horizontale Scroll-Position in der Eigenschaft document.body.scrollLeft
gespeichert. Wenn Sie eine Dokumenttyp-Deklaration einsetzen, die im Internet Explorer 6 den standardkonformen Modus auslöst, müssen Sie
document.documentElement.scrollLeft
statt document.body.scrollLeft
verwenden. Zu diesem Zeitpunkt muss jedoch das body
- bzw. html
-Element bereits vorhanden sein, d.h. es ist sinnvoll, die Ermittlung dieser Eigenschaften vom Event-Handler onload abhängig zu machen.
Ein fertiges Script zum Auslesen der horizontalen und vertikalen Scroll-Position, das alle Browser und Anzeigemodi berücksichtigt, finden Sie auf quirksmode.org.
Speichert die aktuelle vertikale Position innerhalb der Seite, gemessen am Dokumentanfang. So lässt sich ermitteln, wie weit der Anwender bereits nach unten gescrollt hat. Sinnvoll in Verbindung der Verwendung mit scrollBy() oder scrollTo().
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> </head><body> <script type="text/javascript"> for (var i = 0; i < 100; i++) document.write("Viel Text<br>"); function Position () { alert("pageYOffset: " + window.pageYOffset + " Pixel"); } </script> <a href="javascript:Position()">Y-Position</a> </body></html>
Im Beispiel schreibt ein JavaScript zu Testzwecken 100 mal eine HTML-Zeile mit dem Text Viel Text
in das Dokumentfenster. Das veranlasst den Browser, entsprechend weit nach unten mit zu scrollen. Am Ende wird ein Verweis notiert. Bei dessen Anklicken wird die Funktion Position()
aufgerufen. Sie gibt mit alert() aus, wie weit die aktuelle Scroll-Position vom Dokumentanfang entfernt ist.
Im Internet Explorer ab Version 4 ist die vertikale Scroll-Position in der Eigenschaft document.body.scrollTop
gespeichert. Wenn Sie eine Dokumenttyp-Deklaration einsetzen, die im Internet Explorer 6 den standardkonformen Modus auslöst, müssen Sie
document.documentElement.scrollTop
statt document.body.scrollTop
verwenden. Zu diesem Zeitpunkt muss jedoch das body
- bzw. html
-Element bereits vorhanden sein, d.h. es ist sinnvoll, die Ermittlung dieser Eigenschaften vom Event-Handler onload abhängig zu machen.
Ein fertiges Script zum Auslesen der horizontalen und vertikalen Scroll-Position, das alle Browser und Anzeigemodi berücksichtigt, finden Sie auf quirksmode.org.
Speichert, ob ein Fenster eine eigene "persönliche" Leiste hat. Das ist bei Netscape 4.x und Mozilla die Leiste unterhalb der Adresszeile, die den Direktzugriff auf Lieblingsadressen (Bookmarks) ermöglicht. Stellt selbst ein Objekt dar, das eine Eigenschaft hat, nämlich die Eigenschaft visible
(= sichtbar). Enthält für diese Eigenschaft den Wert true
, wenn das Fenster eine solche Leiste hat, und den Wert false
, wenn es keine hat.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> <script type="text/javascript"> function PersonalCheck () { if (window.personalbar) { if (window.personalbar.visible == false) { alert("Haben Sie denn keine Lieblingsadressen?"); } else { alert("Aha, Sie nutzen also die Personal Bar!"); } } else { alert("Schade, Ihr Browser mag nicht verraten, ob Sie eine Personal Bar benutzen."); } } </script> </head><body> <a href="javascript:PersonalCheck()">Persönlichkeitstest</a> </body></html>
Das Beispiel enthält einen Verweis. Wenn der Anwender den Verweis anklickt, wird eine Funktion PersonalCheck()
aufgerufen. Diese prüft, ob der Browser das Objekt personalbar
kennt und ob für das aktuelle Fenster eine Bookmarks-Leiste verfügbar ist. Je nach Ergebnis wird dem Anwender mit alert() eine "persönliche" Meldung ausgegeben.
Mozilla Firefox 1.0 kennt das Objekt window.personalbar
zwar, die visible
-Eigenschaft liefert jedoch in den meisten Fällen unbrauchbare Werte, die nicht wiederspiegeln, ob eine Bookmark-Leiste zu sehen ist oder nicht. Nur bei mit window.open() geöffneten Fenstern liefert visible
korrekte Werte.
Speichert, ob ein Fenster Scroll-Leisten hat. Stellt selbst ein Objekt dar, das eine Eigenschaft hat, nämlich die Eigenschaft visible
(= sichtbar). Enthält für diese Eigenschaft den Wert true
, wenn das Fenster Scroll-Leisten hat, und den Wert false
, wenn es keine hat.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> <script type="text/javascript"> function FensterOeffnen () { Neufenster = window.open("datei.htm", "AnderesFenster", "width=400,height=250"); if (Neufenster.scrollbars) { if (Neufenster.scrollbars.visible == false) Neufenster.close(); } else { alert("Ihr Browser erlaubt das Abfragen der Scrollbars nicht."); } } </script> </head><body> <a href="javascript:FensterOeffnen()">Kleiner Scroll-Test</a> </body></html>
Das Beispiel enthält einen Verweis. Wenn dieser aktiviert wird, wird eine Funktion FensterOeffnen()
aufgerufen. Diese öffnet ein zweite, kleineres Fenster, das anschließend unter Neufenster
ansprechbar ist. Anschließend prüft die Funktion, ob der Browser das Objekt scrollbars
kennt und ob für das zweite Fenster Scroll-Leisten verfügbar sind. Wenn das zweite Fenster keine Scroll-Leisten hat, wird das Fenster mit close() geschlossen. Wenn das scrollbars
-Objekt nicht verfügbar ist, wird eine entsprechende Meldung ausgegeben.
Safari kennt zwar das scrollbars
-Objekt und dessen Eigenschaft visible
. Allerdings hat diese auch dann den Wert true
, wenn das Fenster keine Scroll-Leisten besitzt.
Der Wert hat nur dann false
, wenn beim window.open()
-Aufruf ausdrücklich scrollbars=false
angegeben wurde. Deshalb funktioniert das Beispiel im Safari nicht: Das geöffnete Fenster wird nicht geschlossen, obwohl die Scroll-Listen nicht sichtbar sind. Für Firefox gilt dasselbe, allerdings liefert dieser selbst im besagten window-open()
-Fall einen unzutreffenden Wert.
Speichert, ob ein Fenster eine eigene Statuszeile hat. Stellt selbst ein Objekt dar, das eine Eigenschaft hat, nämlich die Eigenschaft visible
(= sichtbar). Enthält für diese Eigenschaft den Wert true
, wenn das Fenster eine Statuszeile hat, und den Wert false
, wenn es keine hat.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> <script type="text/javascript"> function Statustext (Text) { if (window.statusbar && window.statusbar.visible == true) { window.defaultStatus = Text; } else { alert(Text); } } </script> </head><body> <form name="Eingabe" action=""> <input type="text" name="Feld"> <input type="button" value="Start" onclick="Statustext(document.Eingabe.Feld.value)"> </form> </body></html>
Im Beispiel wird ein Formular definiert. Der Anwender kann einen Text eingeben. Beim Klick auf den Button wird die Funktion Statustext()
aufgerufen. Die Funktion ermittelt, ob der Browser das Objekt statusbar
kennt und ob das aktuelle Fenster eine Statuszeile hat. Wenn ja, wird der im Eingabefeld eingegebene Text als Standardtext der Statuszeile gesetzt. Wenn nein, wird der eingegebene Text nur mit alert() angezeigt.
Mozilla Firefox 1.0 kennt das Objekt window.statusbar
zwar, die visible
-Eigenschaft liefert jedoch in den meisten Fällen unbrauchbare Werte, die nicht wiederspiegeln, ob eine Statusleiste zu sehen ist oder nicht. Nur bei mit window.open() geöffneten Fenstern liefert visible
korrekte Werte. Aber auch dabei gibt es - wenn auch selten vorkommende - Ausnahmen: Wenn die Statusleiste standardmäßig ausgeschaltet ist und Sie ein Fenster mit der Eigenschaft status=yes
öffnen, so zeigt Firefox trotzdem keine Statusleiste, gibt aber fälschlicherweise true
für window.statusbar.visible
zurück. Sie sollten sich daher nicht auf diese Eigenschaft verlassen.
Speichert oder setzt den aktuellen Inhalt der Statuszeile.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> </head><body> <a href="datei.htm" onmouseover="window.status = 'Das ist ein Verweis'; return true;">Verweis</a> </body></html>
Das Beispiel zeigt einen Verweis. Beim Überfahren des Verweistextes mit der Maus erscheint in der Statuszeile der Text: das ist ein Verweis
. Wichtig ist bei solchen Konstrukten die Anweisung return true
am Ende.
Besucher, die bewusst auf den Inhalt der Statuszeile achten, erwarten, dort für sie wichtige Information in Form eines Verweisziels vorzufinden. Nutzer hingegen, die den Inhalt der Statuszeile nicht wahrnehmen, werden von einer etwaigen Zusatzinformation nichts mitbekommen. Sie sollten daher möglichst davon absehen, die Statusleiste zu manipulieren.
Die Browserhersteller haben auf diese Probleme reagiert, indem sie window.status
weitestgehend "abgeschaltet" haben. Der Internet Explorer 7 unterbindet Manipulationen der Statuszeile gänzlich. Firefox, Opera und Konqueror bieten eine Einstellung an, die das Beschreiben der Statusleiste für Scripte unmöglich macht.
Selbst wenn keine Einstellungen das Beschreiben von window.status
verbieten, so wird im Opera und Konqueror beim Überfahren eines Verweises immer dessen Ziel in der Statusleiste angezeigt. Diese Browser stellen den neuen Text in der Statuszeile erst dar, wenn der Mauszeiger den Verweis selbst wieder verlassen hat.
Alles in allem können Sie window.status
als eine überholte und mittlerweile unbrauchbare Eigenschaft sehen - vermeiden Sie sie möglichst ganz.
Speichert, ob ein Fenster eine eigene Button-Leiste (mit Buttons für "Vor", "Zurück" usw.) hat. Stellt selbst ein Objekt dar, das eine Eigenschaft hat, nämlich die Eigenschaft visible
(= sichtbar). Enthält für diese Eigenschaft den Wert true
, wenn das Fenster eine Button-Leiste hat, und den Wert false
, wenn es keine hat.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> </head><body> <script type="text/javascript"> if (window.toolbar && window.toolbar.visible == false) document.write('<a href="javascript:history.back()">Back<\/a>'); </script> </body></html>
Das Beispiel enthält innerhalb des Dateikörpers einen Script-Bereich. Darin wird überprüft, ob das Fenster eine eigene Button-Leiste hat. Wenn nicht, wird mit document.write() ein HTML-Konstrukt an die Stelle im Dokument geschrieben, die den Button "Zurück" als HTML-Verweis schreibt (siehe auch history.back()).
Mozilla Firefox 1.0 kennt das Objekt window.toolbar
zwar, die visible
-Eigenschaft liefert aber nur dann einen korrekten Wert, wenn es auf Fenster angewendet wird, die Sie vorher mit window.open() selbst geöffnet haben. Das obige Beispiel stellt daher nicht korrekt fest, ob die Firefox-Navigationsleiste eingeblendet ist oder nicht.
Gibt Text in einem Dialogfenster aus. Erwartet eine Zeichenkette, eine Zahl oder ein Objekt als Parameter.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> </head><body> <a href="javascript:alert('Verweisziel noch nicht erreichbar')">Unsere Erfolge</a> </body></html>
Das Beispiel führt beim Anklicken eines Verweises keinen Sprung zu einer anderen Seite aus, sondern gibt stattdessen eine Dialogbox mit dem Hinweis "Verweisziel noch nicht erreichbar"
aus. Sie können der alert()-Methode feste Zeichenketten übergeben wie im Beispiel, aber auch Variablen. Dann wird der Inhalt der Variablen ausgegeben. Auch zusammengesetzte Ketten dürfen Sie übergeben, etwa:
alert("Ihr Browser" + navigator.userAgent)
Intern wandelt die alert()
-Methode den übergebenen Parameter in eine Zeichenkette um. So kann es vorkommen, dass sich ein Wert mit alert()
ausgeben lässt, jedoch keine Zeichenkettenoperationen mit dem ausgegebenen Wert ausführbar sind, da es sich außerhalb der Ausgabe nicht um eine Zeichenkette handelt.
Der Rückgabewert der Methode alert()
ist stets undefined
.
Das Aussehen des Mitteilungsfenster ist abhängig vom Betriebssystem und dem verwendeten Browser. Das bedeutet, Sie können die Mitteilungsbox nur mittels Steuerzeichen formatieren. Weitere Formatierungsmöglichkeiten stehen Ihnen nicht zur Verfügung.
Entspricht bei normalen WWW-Seiten einem Klick auf den "Zurück"-Button im Browser. Bei Frames wird jedoch die letzte besuchte Seite aufgerufen, die nicht zum Frame-Set gehörte. Hier liegt der entscheidende Unterschied zur Methode history.back!
Diese Methode erwartet keine Parameter.
<html><head><title>Test</title> </head><body> <a href="javascript:window.back()">Zurück</a> </body></html>
Das Beispiel realisiert einen HTML-Verweis, bei dessen Anklicken die Seite aufgerufen wird, die zuletzt das gesamte Anzeigefenster ausfüllte.
Macht ein Fenster inaktiv. Das Gegenteil von focus(). Erwartet keine Parameter.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> <script type="text/javascript"> var Neufenster = window.open("datei.htm", "AnderesFenster", "width=400,height=250"); </script> </head><body> <a href="javascript:Neufenster.focus()">Fenster nach vorne</a><br> <a href="javascript:Neufenster.blur()">Fenster nach hinten</a> </body></html>
Im Beispiel wird beim Einlesen der HTML-Datei ein zweites, kleines Fenster geöffnet. Die HTML-Datei selbst enthält zwei Verweise. Beim Anklicken des ersten Verweises wird das zweite Fenster aktiviert - focus()
. Beim Anklicken des zweiten Verweises wird es deaktiviert und je nach Fensterkonstellation von dem Hauptfenster überdeckt - blur()
.
Überwacht Anwenderereignisse im angegebenen Fenster. Erwartet als Parameter eine Folge von Ereignissen, die überwacht werden sollen. Folgende Ereignisse lassen sich überwachen:
Event.ABORT Event.BLUR Event.CHANGE Event.CLICK Event.DBLCLICK Event.DRAGDROP Event.ERROR Event.FOCUS Event.KEYDOWN Event.KEYPRESS Event.KEYUP Event.LOAD Event.MOUSEDOWN Event.MOUSEMOVE Event.MOUSEOUT Event.MOUSEOVER Event.MOUSEUP Event.MOVE Event.RESET Event.RESIZE Event.SELECT Event.SUBMIT Event.UNLOAD
.
Es handelt sich dabei um spezielle Notationsvarianten entsprechender Event-Handler ohne das "on" davor, dafür mit dem Ansprechen des Event-Objekts davor. So entspricht etwa Event.MOUSEOVER
dem Event-Handler onmouseover
.
Sie können mehrere Ereignisse überwachen. Trennen Sie die Event-Namen dabei durch |
(Querstriche).
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> <script type="text/javascript"> window.captureEvents(Event.KEYPRESS); window.onkeypress = Ausgabe; function Ausgabe (Ereignis) { alert("Sie haben die Taste mit dem Wert " + Ereignis.which + " gedrueckt"); } </script> </head><body> Drüuecken Sie irgendwelche Tasten! </body></html>
Im Beispiel wird der Event KEYPRESS
(Taste gedrückt) überwacht. Wenn der Anwender eine Taste drückt, wird die Funktion Ausgabe()
aufgerufen, die mit alert() ausgibt, welche Taste gedrückt wurde. Die Syntax beim Funktionsaufruf ist dabei abweichend von der üblichen. Ein zusammenhängendes Beispiel mit Erläuterungen hierzu finden Sie im Kapitel Dynamisches HTML im Abschnitt über das Event-Objekt bei Netscape.
Die Methode captureEvents()
existiert auch bei anderen Browsern, nämlich Mozilla Firefox, Opera, Konqueror und Safari. Dort ist die Methode allerdings wirkungslos und wird auch nicht benötigt. Denn lediglich im Netscape 4 muss zum Aktivieren der Ereignisüberwachung captureEvents()
ausgeführt werden. Den anderen Browsern reicht die Anweisung window.onkeypress = Ausgabe;
im Beispiel aus. Deshalb funktioniert das Beispiel auch in diesen Browsern - aber das würde es auch ohne captureEvents()
.
Bricht einen Endlosvorgang ab, der mit setInterval() begonnen wurde. Erwartet als Parameter die Variable, in der der Aufruf von setInterval()
gespeichert wurde.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> </head><body> <script type="text/javascript"> var aktiv = window.setInterval("Farbe()", 1000); var i = 0, farbe = 1; function Farbe () { if (farbe == 1) { document.bgColor = "yellow"; farbe = 2; } else { document.bgColor = "aqua"; farbe = 1; } i = i + 1; if (i >= 10) window.clearInterval(aktiv); } </script> </body></html>
Das Beispiel definiert mit setInterval()
, dass die Funktion Farbe()
alle 1000 Millisekunden, also jede Sekunde einmal aufgerufen wird. Der Aufruf wird in der Variablen aktiv
gespeichert. Im Beispiel wechselt die Funktion Farbe()
bei jedem Aufruf die Hintergrundfarbe der Datei ( document.bgColor). Gleichzeitig wird ein Zähler hochgezählt. Wenn er größer gleich 10 ist, wird die Methode clearInterval()
aufgerufen, die den Endlosvorgang stoppt. Dabei wird die zuvor definierte Variable aktiv
als Parameter übergeben.
Bricht einen Timeout ab, der mit der Methode setTimeout() gestartet wurde. Erwartet als Parameter die Variable, in der der Aufruf von setTimeout()
gespeichert wurde.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> <script type="text/javascript"> var i = 0; function Zaehlen () { i = i + 1; aktiv = window.setTimeout("Zaehlen()", 1000); } function Aufhoeren () { window.clearTimeout(aktiv); alert(i + " Sekunden"); } aktiv = window.setTimeout("Zaehlen()", 1000); </script> </head><body> <form action=""> <input type="button" value="Klick" onclick="Aufhoeren()"> </form> </body></html>
Das Beispiel startet beim Einlesen der Datei mit setTimeout()
einen Zählvorgang. Dabei wird alle 1000 Millisekunden, also 1 mal pro Sekunde, die Funktion Zaehlen()
aufgerufen. Diese zaehlt die Variable i
hoch. In der Datei wird ein Button definiert. Wenn der Anwender auf den Button klickt, wird die Funktion Aufhoeren()
aufgerufen. Diese Funktion stoppt mit clearTimeout()
den Timeout und gibt mit alert() die Anzahl der gezählten Sekunden aus. Beim Aufruf von clearTimeout()
wird die zuvor bei setTimeout()
definierte globale Variable aktiv
als Parameter übergeben.
Schließt ein Fenster. Erwartet keine Parameter.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> <script type="text/javascript"> var Info = window.open("datei.htm", "Zweitfenster"); </script> </head><body> <form action=""> <input type="button" value="Fenster zu" onclick="Info.close()"> </form> </body></html>
Das Beispiel öffnet beim Einlesen der Datei ein zweites Fenster namens Info
. In der Beispieldatei wird ein Button definiert. Wenn der Anwender auf den Button klickt, wird das zweite Fenster geschlossen.
Die Methode close()
unterliegt der Sicherheitskonzeption von JavaScript. Das bedeutet, dass sich ein Fenster, sobald es eine History besitzt (weil der Anwender darin mehrere Seiten aufgerufen hat), nicht mehr ohne eine Browsernachfrage schließen lässt. Ein Unterdrücken dieser Abfrage ist nicht möglich.
Blendet ein Dialogfenster mit zwei Buttons für "OK" und "Abbrechen" ein. Sinnvoll, um vom Anwender eine Entscheidung zu erzwingen, die im weiteren Programmablauf verarbeitet wird. Erwartet als Parameter einen Aufforderungstext für die Ja/Nein-Entscheidung. Liefert als Ergebnis zurück, wie sich der Anwender entschieden hat.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> <script type="text/javascript"> Check = confirm("Wollen Sie diese Seite wirklich sehen?"); if (Check == false) history.back(); </script> </head><body> </body></html>
Im Beispiel wird der Anwender beim Einlesen der Datei gefragt, ob er die Seite wirklich sehen will. Der Rückgabewert von confirm()
wird in der Variablen Check
gespeichert. Wenn der Anwender auf "OK" klickt, enthält Check
den Wert true
. Es passiert nichts weiter und die Seite wird geladen. Wenn er "Abbrechen" wählt, erhält Check
den Wert false
. Für diesen Fall ist die Anweisung history.back() notiert, die den Anwender auf die Seite zurückbefördert, von der er kam.
Das Aussehen des Auswahlfenster ist abhängig vom Betriebssystem und dem verwendeten Browser. Das bedeutet, Sie können die Auswahl nur mittels Steuerzeichen formatieren. Weitere Formatierungsmöglichkeiten stehen Ihnen nicht zur Verfügung.
Verbietet anderen Fenstern, Ereignisse im aktuellen Fenster zu überwachen. Vor allem als Schutz gedacht, falls fremde Seiten die eigene Seiten in ein Frame-Set laden.
<html><head><title>Test</title> <script type="text/javascript"> disableExternalCapture(); </script> </head><body> </body></html>
Das Beispiel startet beim Einlesen den Befehl disableExternalCapture()
. Dadurch können fremde Seiten keine Anwenderereignisse in dieser Datei überwachen, falls die Datei in ein fremdes Frame-Set geladen wird.
Erlaubt anderen Fenstern, Ereignisse im aktuellen Fenster zu überwachen. So lassen sich von anderen Fenstern eines Frame-Sets aus Anwenderereignisse im aktuellen Fenster überwachen.
<html><head><title>Test</title> <script type="text/javascript"> enableExternalCapture(); </script> </head><body> </body></html>
Das Beispiel startet beim Einlesen den Befehl enableExternalCapture()
. Dadurch können fremde Seiten Anwenderereignisse in dieser Datei überwachen, falls die Datei Teil eines Frame-Sets ist.
Durchsucht den Inhalt eines Fensters nach einem Text. Entspricht in der Funktionalität dem Menübefehl "Suchen". Die Suche bezieht sich nur auf die aktuelle Seite.
Erwartet folgende Parameter:
1. Text = Text, nach dem gesucht werden soll.
2. Groß-/Kleinschreibung beachten = true
für ja oder false
für nein übergeben.
3. Suchrichtung rückwärts = true
für ja oder false
für nein übergeben.
Die beiden letzten Parameter sind optional.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> </head><body> <form action=""> <p>Geben Sie einen Suchbegriff ein: <input type="text" name="SuchNach"> <input type="button" value="suchen" onclick="find(this.form.SuchNach.value, false, false)"> </form> </body></html>
Im Beispiel steht am Anfang der Datei ein Formular mit einem Eingabefeld zur Eingabe eines Suchbegriffs. Das Formular enthält außerdem einen Button. Bei dessen Anklicken wird der weitere Inhalt der Datei nach dem Begriff durchsucht, den der Anwender in dem Eingabefeld eingegeben hat.
Netscape 6.1 kennt diese Methode nicht (mehr).
Macht ein Fenster zum aktiven Fenster. Sinnvoll bei Verwendung von Zweitfenstern, aber auch bei Frame-Fenstern. Erwartet keine Parameter.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> <script type="text/javascript"> function FrameVerweis (Ziel) { parent.frames[1].location.href = Ziel; parent.frames[1].focus(); } </script> </head><body> <a href="javascript:FrameVerweis('../location.htm')">Neue Seite</a> </body></html>
Das Beispiel nimmt an, dass die aktuelle Datei Teil eines Frame-Sets ist. Die Datei enthält einen Verweis, dessen Ziel in einem anderen Frame-Fenster angezeigt werden soll. Beim Anklicken wird aber nicht nur das Verweisziel in das andere Frame-Fenster geladen, sondern dieses wird zugleich das aktive Fenster. So kann der Anwender beispielsweise gleich mit den Pfeiltasten darin scrollen. Dazu wird beim Anklicken des Verweises eine Funktion FrameVerweis()
aufgerufen. Diese Funktion lädt im ersten Befehl das als Parameter übergebene Verweisziel in den anderen Frame ( location.href), und im zweiten Befehl setzt sie mit focus()
das Ziel-Frame-Fenster aktiv.
Zur Adressierung von Frame-Fenstern in JavaScript lesen Sie den Abschnitt über das Objekt frames.
Entspricht bei normalen WWW-Seiten einem Klick auf den "Vorwärts"-Button im Browser. Bei Frames wird jedoch die nächste besuchte Seite aufgerufen, die nicht zum Frame-Set gehört. Bei Frames also unterschiedlich zu history.forward()
! Erwartet keine Parameter.
<html><head><title>Test</title> </head><body> <a href="javascript:window.forward()">Vor</a> </body></html>
Das Beispiel realisiert einen HTML-Verweis, bei dessen Anklicken die Seite aufgerufen wird, die beim Vorwärtsgehen in der History als nächste das gesamte Anzeigefenster ausfüllt.
Übergibt ein Ereignis an ein Element, das in der Lage ist, auf das Ereignis zu reagieren.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> <script type="text/javascript"> function clickHandler (Ereignis) { window.document.links[0].handleEvent(Ereignis); } window.captureEvents(Event.CLICK); window.onclick = clickHandler; </script> </head><body> <a href="datei.htm" onclick="location.href = 'datei.htm'">Verweis</a> </body></html>
Das Beispiel enthält einen Verweis, bei dessen Anklicken - ganz normal durch die href
-Angabe - die Datei datei.htm
aufgerufen wird. Im Beispiel ist es jedoch so, dass datei.htm
sofort aufgerufen wird, sobald der Anwender irgendwo im Browser-Fenster hinklickt. Dazu wird beim Einlesen der Datei mit der captureEvents()-Methode das Mausklick-Ereignis überwacht. Wenn das Ereignis eintritt, wird die Funktion ClickHandler()
aufgerufen. Diese übergibt mit handleEvent()
das Ereignis an den ersten im Dokument definierten Verweis weiter (document.links[0]
). In dem entsprechenden Verweis ist dazu ein Event-Handler onclick
notiert. Dieser ist in der Lage, das übergebene Ereignis zu verarbeiten. Als Befehl wird mit location.href die gleiche Datei aufgerufen wie beim Anklicken des Verweises selbst.
Netscape 6.1 kennt diese Methode nicht (mehr).
Entspricht einem Klick auf den "Home"-Button im Browser.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> </head><body> <a href="javascript:home()">Nach hause</a> </body></html>
Das Beispiel definiert einen Verweis, bei dessen Anklicken die Seite aufgerufen wird, die der Anwender als Start-Homepage eingestellt hat.
Verschiebt ein Fenster um so viele Pixel wie angegeben. Erwartet folgende Parameter:
1. x-Wert = um wie viele Pixel das Fenster nach links/rechts verschoben werden soll. Negative Werte verschieben nach links, positive nach rechts.
2. y-Wert = um wie viele Pixel das Fenster nach oben/unten verschoben werden soll. Negative Werte verschieben nach oben, positive nach unten.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> <script type="text/javascript"> Fenster = window.open("datei.htm", "Zweitfenster", "width=200,height=200"); function Bewege () { Fenster.moveBy(200, 100); Fenster.focus(); } </script> </head><body> <a href="javascript:Bewege()">Fenster bewegen</a> </body></html>
Das Beispiel lädt beim Einlesen der Datei ein kleines Zweitfenster mit einer anderen Datei. Das Hauptfenster enthält einen Verweis. Beim Anklicken des Verweises wird die Funktion Bewege()
aufgerufen, die das kleine Fenster um 200 Pixel nach rechts und um 100 Pixel nach unten verschiebt.
Verschiebt ein Fenster auf die anzugebende Position. Erwartet folgende Parameter:
1. x-Wert = Links-Wert für die neue obere linke Ecke des Fensters.
2. y-Wert = Oben-Wert für die neue obere linke Ecke des Fensters.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> <script type="text/javascript"> Fenster = window.open("datei.htm", "Zweitfenster", "width=200,height=200"); function Bewege () { Fenster.moveTo(screen.width - 250, screen.height - 350); Fenster.focus(); } </script> </head><body> <a href="javascript:Bewege()">Fenster bewegen</a> </body></html>
Das Beispiel lädt beim Einlesen der Datei ein kleines Zweitfenster mit einer anderen Datei. Das Zweitfenster hat eine Breite und eine Höhe von 200 Pixeln. Das Hauptfenster enthält einen Verweis. Beim Anklicken des Verweises wird die Funktion Bewege()
aufgerufen, die das kleine Fenster in die rechte untere Ecke des Bildschirms verschiebt. Die Pixelangaben für die neue linke obere Ecke des Fensters werden dabei mit Hilfe des screen-Objekts gewonnen, das mit screen.width
die Bildschirmbreite und mit screen.height
die Bildschirmhöhe liefert.
Öffnet ein neues Fenster. Erwartet mindestens zwei, optional auch drei Parameter:
1. URI = Zieladresse einer Datei, die in das neue Fenster geladen werden soll. Wenn sich die Datei im gleichen Verzeichnis befindet, genügt der Dateiname. Ansonsten relative Pfadnamen oder absolute http-Adressen angeben.
Um ein leeres Fenster zu öffnen kann auch eine leere Zeichenkette angegeben werden. In einigen alten Browserversionen (IE 3) führt dies allerdings zu einer Fehlermeldung.
Anstelle eines URI können Sie auch mit about:blank
eine leere Datei in das Fenster laden.
Was aber wiederum in einigen Opera (bis 7) Versionen dazu führt, dass Sie dieses Fehler nicht mehr mit Javascript ansprechen können.
2. Fenstername = Ein Name, der nur aus Buchstaben, Ziffern und Unterstrich bestehen darf. Unter diesem Namen können beispielsweise Verweise ihre Ziele mit <a href="ziel.htm" target="NameDesFensters">
in das erzeugte Fenster laden.
Gültige Fensternamen sind auch _blank
,_parent
,_self
und _top
. Opera 5.12 öffnet jedoch in jedem Fall die Datei im gleichen Fenster. Netscape 6 interpretiert die Angabe _parent
nicht.
3. (optional) Angaben zum Aussehen des Fensters = Eine Zeichenkette, in der Sie die Größe und die Eigenschaften des Fensters festlegen können. Mehrere Angaben sind durch Kommata zu trennen. Folgende Angaben sind möglich:
Eigenschaft | Wertzuweisung | Status | Bedeutung |
---|---|---|---|
dependent |
yes|no |
Wenn ja (yes ), wird das Fenster geschlossen, wenn sein Elternfenster geschlossen wird. Wenn nein (no = Voreinstellung), bleibt das Fenster erhalten, wenn sein Elternfenster geschlossen wird. |
|
height |
[Pixel] |
Höhe des neuen Fensters in Pixeln, z.B. height=200 . |
|
hotkeys |
yes|no |
Wenn nein (no ), werden Tastaturbefehle zum Steuern des Browsers in dem Fenster deaktiviert. Wenn ja (yes = Voreinstellung), bleiben Tastaturbefehle des Browsers in dem Fenster gültig. |
|
innerHeight |
[Pixel] |
Höhe des Anzeigebereichs des neuen Fensters in Pixeln, z.B. innerHeight=200 . |
|
innerWidth |
[Pixel] |
Breite des Anzeigebereichs des neuen Fensters in Pixeln, z.B. innerWidth=200 . |
|
left |
[Pixel] |
Horizontalwert der linken oberen Ecke des neuen Fensters in Pixeln, z.B. left=100 . |
|
location |
yes|no |
Wenn ja (yes ), erhält das Fenster eine eigene Adresszeile. Wenn nein (no ), erhält es keine Adresszeile. Voreinstellung ist no , beim Internet Explorer jedoch nur, wenn die Optionenzeichenkette mindestens eine Option enthält. Netscape 6.1 interpretiert diese Angabe nicht. |
|
menubar |
yes|no |
Wenn ja (yes ), erhält das Fenster eine eigene Menüleiste mit Browser-Befehlen. Wenn nein (no ), erhält es keine Menüleiste. Voreinstellung ist no , beim Internet Explorer jedoch nur, wenn die Optionenzeichenkette mindestens eine Option enthält. Beachten Sie: Bei Safari ist die Menüleiste wie auf dem Macintosh üblich nicht Bestandteil des Fensters, kann also nicht ausgeblendet werden. |
|
resizable |
yes|no |
Wenn ja (yes ), kann der Anwender das Fenster in der Größe verändern. Wenn nein (no ), kann er die Fenstergröße nicht ändern. Voreinstellung ist no , beim Internet Explorer jedoch nur, wenn die Optionenzeichenkette mindestens eine Option enthält. |
|
screenX |
[Pixel] |
Horizontalwert der linken oberen Ecke des neuen Fensters in Pixeln, z.B. screenX=100 . |
|
screenY |
[Pixel] |
Vertikalwert der linken oberen Ecke des neuen Fensters in Pixeln, z.B. screenY=30 . |
|
scrollbars |
yes|no |
Wenn ja (yes ), erhält das Fenster Scroll-Leisten. Wenn nein (no ), kann der Anwender in dem Fenster nicht scrollen. Voreinstellung ist no , beim Internet Explorer jedoch nur, wenn die Optionenzeichenkette mindestens eine Option enthält. |
|
status |
yes|no |
Wenn ja (yes ), erhält das Fenster eine eigene Statuszeile. Wenn nein (no ), erhält es keine Statuszeile. Voreinstellung ist no , beim Internet Explorer jedoch nur, wenn die Optionenzeichenkette mindestens eine Option enthält. |
|
toolbar |
yes|no |
Wenn ja (yes ), erhält das Fenster eine eigene Werkzeugleiste. Wenn nein (no ), erhält es keine Werkzeugleiste. Voreinstellung ist no , beim Internet Explorer jedoch nur, wenn die Optionenzeichenkette mindestens eine Option enthält. |
|
top |
[Pixel] |
Vertikalwert der linken oberen Ecke des neuen Fensters in Pixeln, z.B. top=100 . |
|
width |
[Pixel] |
Breite des neuen Fensters in Pixeln, z.B. width=400 . |
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> <script type="text/javascript"> function FensterOeffnen (Adresse) { MeinFenster = window.open(Adresse, "Zweitfenster", "width=300,height=400,left=100,top=200"); MeinFenster.focus(); } </script> </head><body> <p><a href="datei.htm" onclick="FensterOeffnen(this.href); return false">Link mit Fenster</a></p> </body></html>
Das Beispiel enthält zunächst einen normalen Link mit dem Linkziel datei.htm. Im Event-Handler onclick ist ein Aufruf der Funktion FensterOeffnen()
notiert. Das bedeutet, dass die Funktion aufgerufen wird, sobald der Link angeklickt wird. Der Funktion wird mit this.href
der Wert des href
-Attributs des Links übergeben. this nimmt dabei auf das aktuelle Objekt Bezug, in diesem Fall das Elementobjekt a.
Die Funktion nimmt dementsprechend als ersten Funktionsparameter die Adresse entgegen, die in einem neuen Fenster geöffnet werden soll. Sie ruft die open()
-Methode mit dieser Adresse auf und übergibt gleichzeitig den Fensternamen "Zweitfenster"
als zweiten Parameter sowie diverse Angaben zum Aussehen des Fensters im dritten Parameter. Anschließend wird das neue Fenster mit focus() in den Vordergrund geholt.
Nach dem Ausführen der Funktion wird schließlich return false
ausgeführt. Dies verhindert, dass der Browser im ursprünglichen Fenster ebenfalls datei.htm öffnet. Denn beim Klicken auf einen Link wird normalerweise erst der Event-Handler onclick
ausgeführt und anschließend der Link regulär geöffnet.
Diese Vorgehensweise hat den Vorteil, dass der Link auch dann funktioniert, wenn JavaScript nicht zur Verfügung steht oder nicht aktiviert ist. In diesem Fall wird datei.htm einfach im selben Fenster geöffnet anstatt in einem neuen.
Die meisten Browser erlauben keine Fensterhöhe oder -breite, die kleiner als 100 Pixel ist. Je nach Betriebssystem und Browser wird bei kleineren Fenstern eine Fehlermeldung (Zugriff verweigert) ausgegeben bzw. die jeweiligen Minimalwerte verwendet.
In verschiedenen Browsern kann der Nutzer bestimmte Fenstereigenschaften selbst vorgeben, sodass manche Angaben zum Aussehen des Fensters ignoriert werden. Auch ist es möglich, das Öffnen von neuen Fenstern zu unterbinden. Insbesondere werden solche Fenster verhindert, die sich automatisch z.B. beim Laden einer HTML-Seite öffnen. Alle neueren Browser besitzen sogenannte Popup-Blocker, die das Aufspringen von aufdringlichen Fenstern u.a. mit Werbung verhindern.
Zudem setzen immer mehr Browser auf "Tabbed Browsing", d.h. das Darstellen von mehreren Webseiten in einem Browserfenster, die der Benutzer in einer Leiste als Registerkarten anwählen kann. Sie müssen damit rechnen, dass window.open()
in solchen Browsern lediglich eine neue Registerkarte öffnet - oder die Zielseite kurzerhand im selben Karteireiter angezeigt wird. In solchen Fällen sind Ihre Angaben zum Aussehen des neuen Fensters natürlich wirkungslos.
Sie sollten sich also nicht darauf verlassen, dass wirklich ein neues Fenster mit dem gewünschten Aussehen geöffnet wird.
Startet den Druckdialog - entspricht dem Menübefehl zum Drucken im Browser. Erwartet keine Parameter.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> </head><body> <a href="javascript:window.print()">Diese Seite drucken</a> </body></html>
Das Beispiel definiert einen Verweis, mit dessen Hilfe der Anwender die Seite ausdrucken kann.
Der Internet Explorer 5 unter Macintosh interpretiert diese Methode nicht.
Für den Internet Explorer 4.x gibt es einen Workaround, um das Ausdrucken mit JavaScript anzustoßen. Dazu muss ein ActiveX-Control eingebunden werden. Der JavaScript-Code sieht dazu folgendermaßen aus (Beispiel):
if (document.all && navigator.appVersion.substring(22, 23) == 4) { self.focus(); var OLECMDID_PRINT = 6; var OLECMDEXECOPT_DONTPROMPTUSER = 2; var OLECMDEXECOPT_PROMPTUSER = 1; var WebBrowser = '<object id="WebBrowser1" width="0" height="0" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></object>'; document.body.insertAdjacentHTML('beforeEnd', WebBrowser); WebBrowser1.ExecWB(OLECMDID_PRINT, OLECMDEXECOPT_DONTPROMPTUSER); WebBrowser1.outerHTML = ''; }
Zeigt ein Dialogfenster mit einem Eingabefeld, einem OK-Button und einem Abbrechen-Button an. Der Anwender kann in dem Eingabefeld etwas eingeben. Die Methode prompt()
gibt diesen eingegebenen Wert zurück. So lassen sich Anwendereingaben im Script weiterverarbeiten.
Erwartet zwei Parameter:
1. Aufforderungstext = Text, der beschreibt, was der Anwender eingeben soll.
2. Feldvorbelegung = Text, mit dem das Eingabefeld vorbelegt wird. Wenn Sie ein leeres Eingabefeld wollen, übergeben Sie dafür eine leere Zeichenkette ""
.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> <script type="text/javascript"> Check = prompt("Geben Sie Ihr Passwort fuer diese Seite ein", ""); if (Check != "Rumpelstielz") { history.back(); } else { alert("Sie haben Zutritt"); } </script> </head><body> </body></html>
Das Beispiel bringt vor dem Anzeigen der HTML-Datei mit prompt()
ein Dialogfenster auf den Bildschirm. Darin muss der Anwender ein Passwort eingeben. Die Eingabe wird in der Variablen Check
gespeichert. Wenn der Wert dieser Variablen nach dem Beenden des Dialogfensters nicht gleich "Rumpelstielz"
ist, wird der Anwender mit history.back() zu der Seite zurückgeschickt, von der er kam. Wenn das eingegebene Wort stimmt, erhält er mit alert() die Meldung, dass er Zutritt hat, und die Seite wird geladen.
Beendet die Überwachung von Anwenderereignissen. Gegenstück zu captureEvents(). Erwartet als Parameter eine Folge von Ereignissen, die nicht mehr überwacht werden sollen. Gleiche Syntax wie bei captureEvents()
.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> <script type="text/javascript"> var i = 0; window.captureEvents(Event.KEYPRESS); window.onkeypress = Ausgabe; function Ausgabe (Ereignis) { alert("Sie haben die Taste mit dem Wert " + Ereignis.which + " gedrueckt"); i = i + 1; if (i > 2) window.releaseEvents(Event.KEYPRESS); } </script> </head><body> Druecken Sie 3 mal irgendwelche Tasten! </body></html>
Im Beispiel wird der Event KEYPRESS (Taste gedrückt) überwacht. Wenn der Anwender eine Taste drückt, wird die Funktion Ausgabe()
aufgerufen, die mit alert() ausgibt, welche Taste gedrückt wurde. Die Funktion ruft sich bei Eintritt des Ereignisses selbst wieder auf, jedoch nur, solange der Zähler i
kleiner als 3 ist. Danach wird das Überwachen der Tastaturereignisse mit der Methode releaseEvents(Event.KEYPRESS)
beendet.
Ein zusammenhängendes Beispiel mit Erläuterungen hierzu finden Sie im Kapitel Dynamisches HTML im Abschnitt über das Event-Objekt bei Netscape.
Die Methode releaseEvents()
existiert auch bei anderen Browsern, nämlich Netscape 6, Mozilla Firefox, Opera, Konqueror und Safari. Dort ist die Methode allerdings wirkungslos oder hat eine Wirkung, die mit dem Beenden der Ereignisüberwachung nichts zu tun hat. Setzen Sie diese Methode daher nur im Zusammenhang mit Netscape 4 ein.
Verändert die Größe eines Fensters um so viele Pixel unten und rechts wie angegeben. Erwartet folgende Parameter:
1. x-Wert = um wie viele Pixel das Fenster rechts verkleinert/vergrößert werden soll. Negative Werte verkleinern, positive vergrößern.
2. y-Wert = um wie viele Pixel das Fenster unten verkleinert/vergrößert werden soll. Negative Werte verkleinern, positive vergrößern.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> <script type="text/javascript"> function Kleiner () { window.resizeBy(-10, -10); } </script> </head><body> <a href="javascript:Kleiner()">Mach kleiner</a> </body></html>
Das Beispiel enthält einen Verweis. Beim Anklicken des Verweises wird die Funktion Kleiner()
aufgerufen. Diese Funktion verkleinert das dateieigene Fenster um 10 Pixel in der Breite und in der Höhe.
Einige Browser setzen nicht nur gewisse Mindestgrößen für Fenster durch, sondern ignorieren je nach Einstellung die Änderung der Fenstergröße durch resizeBy()
vollkommen, da viel Unfug mit dieser Methode getrieben wurde.
Verändert die Größe eines Fensters absolut. Erwartet folgende Parameter:
1. x-Wert = neue Breite des Fensters.
2. y-Wert = neue Höhe des Fensters.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> </head><body onload="window.resizeTo(580, 420)"> </body></html>
Das Beispiel setzt die Fenstergröße beim Einlesen der Datei auf eine Breite von 580 Pixeln und auf eine Höhe von 420 Pixeln.
Einige Browser setzen nicht nur gewisse Mindestgrößen für Fenster durch, sondern ignorieren je nach Einstellung die Änderung der Fenstergröße durch resizeTo()
vollkommen, da viel Unfug mit dieser Methode getrieben wurde.
Übergibt ein Anwenderereignis an das oberste Objekt der Objekthierarchie des Dokuments, also an das window
-Objekt. Vor dort aus wird das Ereignis immer weiter nach unten durchgereicht bis zu dem Element, bei dem das Ereignis eintrat. Wenn sich auf diesem Weg ein Event-Handler findet, der das Ereignis verarbeitet, wird der Abstieg des Ereignisses abgebrochen.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> <script type="text/javascript"> function Click1 () { alert("Sie haben auf den Button geklickt"); } function Click2 (Ereignis) { alert("Sie haben ins Fenster geklickt"); window.routeEvent(Ereignis); } window.captureEvents(Event.CLICK); window.onclick = Click2; </script> </head><body> <form action=""> <input type="button" value="Button" onclick="Click1()"> </form> </body></html>
Das Beispiel enthält einen Button, bei dessen Anklicken die Funktion Click1()
aufgerufen wird. Diese Funktion gibt zur Kontrolle mit alert() aus, dass der Button angeklickt wurde. Im Beispiel ist es jedoch so, dass beim Einlesen der Datei mit der captureEvents()-Methode das Mausklick-Ereignis fensterweit überwacht wird. Wenn das Ereignis eintritt, wird in jedem Fall die Funktion Click2()
aufgerufen. Diese gibt zur Kontrolle aus, dass in das Fenster geklickt wurde. Anschließend übergibt sie mit routeEvent()
das Ereignis an die Objekthierarchie. Wenn auf ein Objekt geklickt wird, das ebenfalls das Klick-Ereignis überwacht, wird die entsprechende Aktion ausgeführt. Im Beispiel hat dies zur Folge, dass der Anwender beim Klick auf den Button zwei Meldungen erhält: nämlich zuerst die, dass ins Fenster geklickt wurde, und danach die, dass auf den Button geklickt wurde. Ohne die routeEvent()
-Methode würde er die zweite Meldung gar nicht erhalten, da das Klick-Ereignis vorher abgefangen worden wäre.
Mozilla Firefox kennt routeEvent()
zwar, die Methode hat dort jedoch keinerlei Wirkung.
Scrollt eine Seite automatisch um so viele Pixel nach oben oder unten oder links oder rechts wie angegeben. Erwartet folgende Parameter:
1. x-Wert = um wie viele Pixel nach rechts links/rechts gescrollt werden soll. Negative Werte scrollen nach links, positive nach rechts.
2. y-Wert = um wie viele Pixel nach oben/unten gescrollt werden soll. Negative Werte scrollen nach oben, positive nach unten.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> </head><body> <script type="text/javascript"> for (var i = 1; i <= 100; i++) document.write("Zeile " + i + "<br>"); function NachOben () { var y = 0; if (window.pageYOffset) { y = window.pageYOffset; } else if (document.body && document.body.scrollTop) { y = document.body.scrollTop; } if (y > 0) { window.scrollBy(0, -10); setTimeout("NachOben()", 10); } } </script> <a href="javascript:NachOben()">nach oben scrollen</a> </body></html>
Das Beispiel schreibt zu Testzwecken in einer Schleife mit document.write() 100 Zeilen in die Datei. Unterhalb davon wird ein HTML-Verweis notiert. Um zu diesem Verweis zu gelangen, muss der Anwender wegen der 100 voranstehenden Zeilen erst mal nach unten scrollen. Wenn er auf den Verweis klickt, wird automatisch langsam zum Seitenanfang zurückgescrollt. Dazu wird die Funktion NachOben()
aufgerufen. Diese Funktion ermittelt mit pageYOffset bzw. im Internet Explorer mit document.body.scrollTop
zunächst die vertikale Position innerhalb der Seite. Wenn die so ermittelte Scroll-Position (y
-Wert) größer als 0 ist, wird um -10 Pixel gescrollt, also um 10 Pixel nach oben.
Mit Hilfe der Methode setTimeout() wird nach 10 Millisekunden die Funktion NachOben()
erneut aufgerufen.
Durch den wiederholten Aufruf der Funktion NachOben()
wird die Seite langsam bis nach oben gescrollt.
Scrollt zu einer bestimmten Position. Erwartet folgende Parameter:
1. x-Wert = Links-Wert für Position der linken oberen Ecke des Anzeigefensters.
2. y-Wert = Oben-Wert für Position der linken oberen Ecke des Anzeigefensters.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> </head><body> <script type="text/javascript"> function Pos100 () { window.scrollTo(100, 100); } document.write('<p style="white-space:nowrap">'); var Zeile = 'Zeile'; for (var i = 1; i <= 50; i++) { Zeile = Zeile + " Zeile"; document.write("<br>Zeile " + Zeile); } document.write('<\/p><p><a href="javascript:Pos100()">Test<\/a><\/p>'); </script> </body></html>
Das Beispiel schreibt zu Testzwecken in einer Schleife mit document.write() 50 Zeilen, wobei die Zeilen immer länger werden. Ganz am Ende wird ein Verweis notiert. Um dort hin zu gelangen, muss der Anwender nach unten und nach rechts scrollen. Wenn er auf den Verweis klickt, wird die Funktion Pos100()
aufgerufen. Diese Funktion setzt die Scroll-Position neu, und zwar auf 100 Pixel von links und 100 Pixel von oben, bezogen auf den Dokumentanfang.
Führt eine Anweisung oder den Aufruf einer Funktion in einem festgelegten Rhythmus immer wieder aus, solange, bis der Vorgang mit clearInterval() beendet wird. Erwartet zwei Parameter:
1. Code = Eine JavaScript-Anweisung, die wiederholt werden soll. Meistens ein Funktionsaufruf.
2. Pause = Wert in Millisekunden bis zum nächsten Ausführen.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> </head><body> <script type="text/javascript"> var aktiv = window.setInterval("Farbe()", 1000); var i = 0, farbe = 1; function Farbe () { if (farbe == 1) { document.bgColor = "yellow"; farbe = 2; } else { document.bgColor = "aqua"; farbe = 1; } i = i + 1; if (i >= 10) window.clearInterval(aktiv); } </script> </body></html>
Das Beispiel definiert mit setInterval()
, dass die Funktion Farbe()
alle 1000 Millisekunden, also jede Sekunde einmal aufgerufen wird. Wichtig ist, dass der Aufruf in einer Variablen gespeichert wird, im Beispiel in der Variablen aktiv
. Diese Variable wird der Methode clearInterval()
benötigt, um den Vorgang zu stoppen. Im Beispiel wechselt die Funktion Farbe()
bei jedem Aufruf die Hintergrundfarbe der Datei ( document.bgColor). Gleichzeitig wird ein Zähler hochgezählt. Wenn er größer gleich 10 ist, wird die Methode clearInterval()
aufgerufen, die den Endlosvorgang stoppt. Dabei wird die zuvor definierte Variable aktiv
als Parameter übergeben.
Führt eine Anweisung nach einer bestimmten Verzögerungszeit aus. Erwartet zwei Parameter:
1. Code = Eine JavaScript-Anweisung, die verzögert ausgeführt werden soll. Meistens ein Funktionsaufruf.
2. Pause = Wert in Millisekunden bis zum Ausführen.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> <script type="text/javascript"> function Hinweis () { var x = confirm("Sie sind jetzt schon 10 Sekunden auf dieser Seite. Fortfahren?"); if (x == false) top.close(); } window.setTimeout("Hinweis()", 10000); </script> </head><body> </body></html>
Das Beispiel ruft nach 10.000 Millisekunden, also nach 10 Sekunden, eine Funktion Hinweis()
auf, sofern der Anwender nach dieser Zeit immer noch auf der Seite ist. Die Funktion fragt ihn mit der confirm()-Methode, ob er noch länger auf der Seite bleiben möchte. Wenn nicht, wird das Hauptfenster geschlossen. Dazu dient der Befehl top.close()
, der die close()-Methode auf die oberste Fensterinstanz des Browsers anwendet.
An setTimeout()
gekoppelte Funktionsaufrufe können auch Parameter enthalten. Berücksichtigen Sie dabei, dass lokale Variable dann nicht mehr zur Verfügung stehen. Eine Übergabe der Werte mittels Zeichenkettenverknüpfung ist jedoch jederzeit möglich.
Entspricht einem Klick auf den "Stop"-Button im Browser. Der Ladevorgang einer Seite wird dadurch abgebrochen.
<html><head><title>Test</title> </head><body> Diese Seite hat einen Umfang von 300 Kilobyte:<br> <a href="javascript:stop()">abbrechen</a> </body></html>
Das Beispiel definiert einen Verweis, bei dessen Anklicken der Ladevorgang einer Seite abgebrochen wird.
In Opera 5 führt dies zu einem Absturz.
frames | |
Hinweise zur JavaScript-Objektreferenz | |
SELFHTML/Navigationshilfen JavaScript/DOM Objektreferenz |
© 2007 Impressum