| Previous | Table of Contents | Next |
| JavaScript Math Object | JavaScript Document Object |
Das JavaScript-Fensterobjekt befindet sich oben in der JavaScript-Objekthierarchie und stellt das Browserfenster dar (oder Fenster, wenn mehr als ein Browserfenster gleichzeitig geöffnet ist). Bis zu diesem Kapitel haben wir uns auf die Interna und die Syntax von JavaScript konzentriert. In diesem Kapitel werden wir beginnen, Dinge auf dem Bildschirm geschehen zu lassen (was schließlich einer der Hauptzwecke von JavaScript ist). Mit dem window-Objekt können Entwickler Aufgaben wie das Öffnen und Schließen von Browserfenstern, das Anzeigen von Alarm- und Eingabeaufforderungsdialogen und das Einrichten von Timeouts (Festlegen einer Aktion, die nach einem bestimmten Zeitraum ausgeführt werden soll) ausführen. Obwohl Zeitüberschreitungen eine Funktion des Window-Objekts sind, werden wir sie im Kapitel JavaScript-Zeitüberschreitungen und nicht in diesem Kapitel behandeln.
Referenzieren des JavaScript-Fensterobjekts
Wie in den JavaScript-Objektgrundlagen beschrieben, ist es normalerweise erforderlich, beim Zugriff auf Eigenschaften oder Methoden eines Objekts die Punktnotation zu verwenden. Beispielsweise greift das folgende Skriptfragment auf die write() -Methode des document-Objekts zu:
document.write("Hello");
Das window-Objekt ist das Objekt der obersten Ebene der Objekthierarchie. Wenn also eine Objektmethode oder -eigenschaft in einem Skript ohne den Objektnamen und das Punktpräfix referenziert wird, wird von JavaScript angenommen, dass sie Mitglied des Fensterobjekts ist. Dies bedeutet zum Beispiel, dass beim Aufruf der window alert() -Methode zum Anzeigen eines Warndialogs das Fenster angezeigt wird. präfix ist nicht obligatorisch. Daher erreichen die folgenden Methodenaufrufe dasselbe:
window.alert();alert()
Diese Anzeige melden Eigenschaften des JavaScript-Fensterobjekts
Das JavaScript-Fensterobjekt enthält eine Reihe von Eigenschaften, die überprüft werden können und in einem Skript verwendet:
- Fenster.geschlossen – Diese Eigenschaft wird bei der Behandlung mehrerer Fenster verwendet und gibt an, ob ein Fenster geschlossen wurde oder nicht.
- Fenster.defaultstatus / Fenster.status – defaultstatus gibt die Standardmeldung an, die in der Statusleiste des Browsers angezeigt wird. status gibt eine temporäre Nachricht an, die anstelle der Standardmeldung in der Statusleiste des Browsers angezeigt werden soll. In vielen Browsern deaktiviert.
- Fenster.frames – Wenn das Fenster Frames enthält, enthält dieses Array das Array von Frame-Objekten (siehe Details zu JavaScript-Arrays beim Zugriff auf Arrays).
- window.name – Fenster, die von einem Skript geöffnet werden, müssen einen Namen erhalten. Diese Eigenschaft enthält den Namen des entsprechenden Fensterobjekts.
- Fenster.öffner – Wenn ein Fenster in einem Skript geöffnet wurde, das in einem anderen Fenster enthalten ist, enthält diese Eigenschaft des untergeordneten Fensters ein Referenzfenster, das es geöffnet hat.
- Fenster.parent – Beim Arbeiten mit Frames in einem Fenster enthält diese Eigenschaft einen Verweis auf das window-Objekt, das den Frame enthält.
- Fenster.bildschirm – Ein Objekt, das Informationen über den Bildschirm enthält, auf dem das Fenster angezeigt wird (in diesem Objekt enthaltene Eigenschaften umfassen height, width, availHeight, availWidth und colorDepth).
- Fenster.self – Ein Verweis auf das aktuelle Fenster.
- Fenster.top – Ein Verweis auf das Fenster der obersten Ebene beim Arbeiten mit Frames.
Öffnen von Browserfenstern mit JavaScript
Ein neues Browserfenster kann aus einem JavaScript-Skript mit der open() -Methode des window-Objekts geöffnet werden. Die Syntax zum Öffnen eines neuen Fensters lautet wie folgt:
newWindowObj = window.open("URL", "WindowName", "feature, feature, feature ... ");
Im Folgenden werden die Argumente erläutert, die an die open() -Methode übergeben werden:
- URL – Gibt die URL der Webseite an, die in das neue Fenster geladen werden soll. Wenn keine URL angegeben ist, wird ein leeres Fenster geladen.
- WindowName – Gibt den Fensternamen an und wird verwendet, um auf das Fenster zu verweisen.
- Funktionen – Eine durch Kommas getrennte Liste von Funktionen, mit denen Sie das Erscheinungsbild des Fensters anpassen können. Optionen sind:
| Einstellung | Erklärung |
|---|---|
| width | Gibt die anfängliche Breite des Browser-Client-Fensters innerWidth für die Größe des Inhaltsbereichs) |
| height | Gibt die Anfangshöhe des Browser-Client-Fensters an (siehe innerHeight für die Größe des Inhaltsbereichs) |
| innerWidth | Gibt die Anfangsbreite des Fensterinhaltsbereichs an |
| innerHeight | Gibt die Anfangshöhe des Fensterinhaltsbereichs an bereich |
| outerWidth | Gibt die Anfangsbreite des Navigatorfensters an |
| outerHeight | Gibt die Anfangshöhe des Navigatorfensters an |
| Symbolleiste | Gibt an, ob das Fenster die Browser-Symbolleiste enthalten soll oder nicht |
| status | Gibt an, ob das Fenster sollte die Browserstatusleiste enthalten oder nicht |
| abhängig | Gibt an, ob das Fenster im Einklang mit dem übergeordneten Fenster geschlossen werden soll |
| Menüleiste | Gibt an, ob das Fenster |
| location | Gibt an, ob das Fenster die Browser location/URL Box enthalten soll |
| scrollbars | Blendet horizontale/vertikale Scrollbars des Browsers ein/aus |
| resizable | Gibt an, ob der Benutzer berechtigt ist, die Größe des Fensters zu ändern, nachdem es angezeigt wurde. |
| Verzeichnisse | Gibt an, ob das Fenster die persönliche Symbolleiste des Browsers enthalten soll. |
| copyHistory | Gibt an, ob das neue Fenster eine Kopie des URL-Verlaufs des aufrufenden Fensters enthalten soll |
| links | Gibt die Anzahl der Pixel vom linken Bildschirmrand bis zum neuen Fenster an |
| oben | Gibt die Anzahl der Pixel vom oberen Bildschirmrand bis zum neuen Fenster an |
| alwaysLowered | Erstellt ein neues Fenster, das immer unter den anderen Browserfenstern positioniert ist. Oft für diese lästigen Pop-Under-Werbung verwendet. |
| alwaysRaised | Erstellt ein neues Fenster, das immer über den anderen Browserfenstern auf dem Bildschirm positioniert ist. |
| z-lock | Sperrt die Ebene, auf der der Browser im Verhältnis zu anderen Browserfenstern angezeigt wird. |
Die Höhen-, Breiten- und Positionsmerkmale werden mithilfe von Zahlen festgelegt. Die verbleibenden Feature-Optionen können mit true oder false-Werten festgelegt werden (anstelle von true und false können auch yes, no und 1 und 0 verwendet werden). Ein abwesendes Attribut wird als falsch angesehen. Im folgenden Beispiel wird ein neues Fenster mit einer Menüleiste, einer bestimmten Dimension und ohne Symbolleiste erstellt:
newWindowObj = window.open("URL", "WindowName", "toolbar=0, menubar=1, innerHeight=200, innerWidth=300");
Schließen von Browserfenstern mit JavaScript
Ein Fenster kann mit der close() -Methode des window-Objekts geschlossen werden. Der Name des Fensters (angegeben in der open() -Methode) sollte beim Schließen referenziert werden, damit Sie sicher sind, das richtige Fenster zu schließen. Der folgende Code erstellt beispielsweise ein neues Fenster und eine Drucktaste, die beim Klicken das neue Fenster schließt:
<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");</script><form action="null"> <input type="button" value="Close Window" onclick="newWindowObj.close()" /></form>
Es ist auch möglich, das Fenster, das das aktuelle Fenster geöffnet hat, mit der Eigenschaft opener des aktuellen Fensterobjekts zu schließen:
window.opener.close()
Dadurch wird das Fenster geschlossen, das das Fenster geöffnet hat, in dem das obige Skript ausgeführt wird.
Verschieben und Ändern der Größe von Fenstern
Ein Fenster kann mit der Methode moveTo() des window-Objekts, die x- und y-Koordinaten als Argumente verwendet, an bestimmte Koordinaten auf dem Bildschirm verschoben werden. Das folgende Beispiel verschiebt ein neues Fenster an die Position 100, 200 auf dem Bildschirm, wenn die Schaltfläche „Fenster verschieben“ gedrückt wird:
<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");</script><form action="null"> <input type="button" value="Move Window" onclick="newWindowObj.moveTo(100, 200)" /></form>
Zusätzlich zum Verschieben eines Fensters an eine bestimmte neue Position ist es auch möglich, ein Fenster relativ zu seiner aktuellen Position auf dem Bildschirm mit der Methode moveBy() des JavaScript-Fensterobjekts zu verschieben. Die Methode verwendet erneut x- und y-Werte, die zu den aktuellen x- und y-Koordinaten des angegebenen Fensters hinzugefügt werden. Negative Werte können verwendet werden, um die Bewegungsrichtung zu ändern:
<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");</script><form action="null"> <input type="button" value="Move Window" onclick="newWindowObj.moveTo(100, 200)" /></form>
Die Methoden window resizeTo() und resizeBy() funktionieren ähnlich, da Sie die Größe eines Fensters entweder auf eine bestimmte Größe oder auf eine neue Größe relativ zur aktuellen Größe ändern können.
Fensterfokus ändern
Wenn ein Fenster das aktuell ausgewählte Fenster auf dem Bildschirm ist, soll es den Fokus haben. Wenn Sie mit dem Mauszeiger in ein Fenster klicken, wird dieses Fenster normalerweise fokussiert. Mit JavaScript ist es möglich, den Fokus eines Fensters mit den Methoden focus () und blur () programmgesteuert zu ändern. Das folgende Beispiel zeigt ein neues Fenster an, verwischt es, so dass das sich öffnende Fenster noch den Fokus hat, und bietet eine Schaltfläche zum Umschalten des Fokus auf das neue Fenster:
<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");newWindowObj.blur();</script><form action="null"> <input type="button" value="Focus New Window" onclick="newWindowObj.focus()" /></form>
Anzeigen von Meldungsfelddialogen
Das JavaScript-Fensterobjekt bietet Methoden zum Anzeigen von drei Arten von Meldungsdialogen, den Dialogen alert, confirmation und prompt:
- alert – soll dem Benutzer eine Nachricht anzeigen. Es enthält einen Meldungsbereich, in dem die Warnmeldung angezeigt werden soll, und eine Schaltfläche „OK“, auf die der Benutzer klicken kann, um den Dialog zu schließen. Die alert() -Methode verwendet ein einzelnes Argument, das die im Dialogfeld anzuzeigende Nachricht darstellt. Das folgende Webseitenfragment zeigt einen Warndialog mit der Meldung „Sie haben kein gültiges Passwort“ an, wenn auf die Schaltfläche „Warnung anzeigen“ geklickt wird:
<form action="null"> <input type="button" value="Show Alert" onclick="window.alert('You do not have a valid password')" /></form>
- Bestätigung – wird verwendet, wenn vom Benutzer eine Ja- oder Nein-Antwort eingeholt werden muss. Dieser Dialogtyp wird mit einer Meldung und den Schaltflächen „OK“ und „Abbrechen“ angezeigt. Die Methode confirm() nimmt die dem Benutzer anzuzeigende Nachricht als Argument und gibt true oder false zurück, je nachdem, ob der Benutzer „OK“ oder „Abbrechen“ gedrückt hat:
<script language="JavaScript" type="text/javascript">function showConfirmation(){ var result = confirm("Would you like to continue?"); if (result) document.write("Continue"); else document.write("Do not continue");}</script><form action="null"> <input type="button" value="Show Confirmation" onclick="showConfirmation()" /></form>
- Eingabeaufforderung – dient dazu, Informationen vom Benutzer abzurufen. Der Dialog besteht aus einer Nachricht an den Benutzer, einem Texteingabefeld zur Eingabe von Daten sowie OK- und Cancel-Buttons. Die Methode prompt() verwendet die anzuzeigende Nachricht als Argument und gibt den vom Benutzer eingegebenen Wert zurück:
<script language="JavaScript" type="text/javascript">function showPrompt(){ var userInput = prompt("Please enter your name:"); document.write("Hello, " + userInput);}</script><form action="null"> <input type="button" value="Show Prompt" onclick="showPrompt()" /></form>
| Previous | Table of Contents | Next |
| JavaScript Math Object | JavaScript Document Object |