JavaScript Window Object

JavaScript Window ist eine globale Schnittstelle (Objekttyp), die verwendet wird, um den Lebenszyklus des Browser-Fensters zu steuern und verschiedene Operationen darauf auszuführen.

Eine globale Variable Window, die das aktuelle Browser-Fenster repräsentiert, in dem der Code läuft, ist in unserem JavaScript-Code verfügbar und kann direkt mit dem window-Literal aufgerufen werden.

Es repräsentiert ein Fenster, das eine Webseite enthält, die wiederum durch das Document-Objekt dargestellt wird. Ein Fenster kann ein neues Fenster, ein neuer Tab, ein Frameset oder ein einzelner Frame sein, der mit JavaScript erstellt wird.

Im Falle eines Browsers mit mehreren Tabs repräsentiert ein Window-Objekt einen einzelnen Tab, aber einige seiner Eigenschaften wie innerHeight, innerWidth und Methoden wie resizeTo() wirken sich auf das gesamte Browserfenster aus.

Wenn Sie ein neues Fenster oder einen Tab öffnen, wird automatisch ein Window-Objekt erstellt, das dieses Fenster/Tab repräsentiert.

Die Eigenschaften eines Fensterobjekts werden verwendet, um Informationen über das aktuell geöffnete Fenster abzurufen, während seine Methoden verwendet werden, um bestimmte Aufgaben wie Öffnen, Maximieren, Minimieren des Fensters usw. auszuführen.

Um das Fensterobjekt zu verstehen, verwenden wir es, um einige Operationen auszuführen und zu sehen, wie es funktioniert.

Verwendung des JavaScript-Fensterobjekts

Lassen Sie uns das JavaScript-Fensterobjekt verwenden, um ein neues Fenster zu erstellen, indem wir die Methode open() verwenden. Diese Methode erstellt ein neues Fenster und gibt ein Objekt zurück, das zur Verwaltung dieses Fensters verwendet werden kann.

Im obigen Code haben wir das Window-Objekt des vorhandenen Fensters verwendet, um mit der Methode open() ein neues Fenster zu erstellen. In der Methode open() können wir die URL angeben, die im neuen Fenster geöffnet werden soll (wir können sie auch leer lassen), den Namen des Fensters, die Breite und die Höhe des zu erstellenden Fensters.

Nachfolgend die Syntax für die open()-Methode des Fensterobjekts:

let newWindow = window.open(url, windowName, );

Wir können so viele Eigenschaften angeben, wie wir wollen, während wir ein neues Fenster erstellen.

Wenn die Methode open() ausgeführt wird, gibt sie die Referenz des Fensterobjekts für das neu erstellte Fenster zurück, die Sie einer Variablen zuweisen können, wie wir es im obigen Code getan haben. Wir haben den von der Methode window.open() zurückgegebenen Wert der Variablen win zugewiesen.

Die Variable win haben wir verwendet, um auf das neue Fenster zuzugreifen, z. B. um den Namen des Fensters abzurufen, die Position des Fensters zu ermitteln, das das neue Fenster geöffnet hat usw.

Es gibt viele Eigenschaften und Methoden für das Window-Objekt, die wir im Folgenden aufgelistet haben.

Dimensionen eines Fensters ermitteln

Wir können die Höhe und Breite eines Fensters ermitteln, indem wir die eingebauten Eigenschaften des Window-Objekts verwenden.

Wir können auch auf das Dokument-Objekt zugreifen, indem wir ein Window-Objekt (window.document) verwenden, das uns Zugriff auf das HTML-Dokument gibt. So können wir neue HTML-Elemente hinzufügen oder beliebige Inhalte in das Dokument schreiben, wie wir es im obigen Beispiel getan haben.

JavaScript Eigenschaften von Fensterobjekten

Die Eigenschaften von Fensterobjekten beziehen sich auf die Variablen, die innerhalb des Fensterobjekts erstellt werden.

In JavaScript werden alle verfügbaren Daten als Eigenschaften an das Fensterobjekt angehängt.

Wir können auf die Eigenschaften von Fensterobjekten zugreifen wie: window.propertyname wobei propertyname der Name der Eigenschaft ist.

Eine Tabelle der gängigsten Eigenschaften von Fensterobjekten ist unten angegeben:

Eigenschaft	Beschreibung
geschlossen	gibt einen booleschen Wert zurück, der angibt, ob ein Fenster geschlossen wurde oder nicht
Dokument	gibt ein Dokumentobjekt im Fenster an.
History	spezifiziert ein History-Objekt für das Fenster.
Frames	spezifiziert ein Array aller Frames im aktuellen Fenster
defaultStatus	spezifiziert die Standardmeldung, die in der Statusleiste von Window erscheinen soll.
innerHeight	gibt die innere Höhe des Inhaltsbereichs des Fensters an.
innerWidth	gibt die innere Breite des Inhaltsbereichs des Fensters an.
length	gibt die Anzahl der im Fenster enthaltenen Frames an.
location	spezifiziert das Location-Objekt für window
name	spezifiziert den Namen für das Fenster
top	spezifiziert die Referenz des obersten Browserfensters.
self	gibt die Referenz des aktuellen aktiven Frames oder Fensters zurück.
parent	gibt den übergeordneten Frame oder das Fenster des aktuellen Fensters zurück.
Status	gibt die Meldung an, die in der Statusleiste des Fensters angezeigt wird, wenn eine Aktivität im Fenster ausgeführt wird.
screenleft	spezifiziert die x-Koordinate des Fensters relativ zum Monitorbildschirm des Benutzers
screenTop	spezifiziert die y-Koordinate des Fensters relativ zum Monitorbildschirm des Benutzers
screenX	gibt die x-Koordinate des Fensters relativ zum Monitorbildschirm des Benutzers an
screenY	gibt die y-Koordinate des Fensters relativ zum Monitorbildschirm des Benutzers an

Lassen Sie uns ein Beispiel nehmen, um einige dieser Eigenschaften in Aktion zu sehen:

Im obigen Beispiel haben wir ein neues Fenster erstellt, um Sie mit der Erstellung eines neuen Fensters vertraut zu machen und um Ihnen zu verdeutlichen, dass, wenn wir ein neues Fenster erstellen, das aktuelle Fenster ein anderes Fensterobjekt hat und das neue Fenster ein eigenes Fensterobjekt hat.

Wir haben dann versucht, auf einige Eigenschaften des neu erstellten Fensters zuzugreifen.

Aufgabe: Probieren Sie einige weitere Fenstereigenschaften in der obigen Code-Spielwiese aus, um zu üben und zu verstehen, wie Fenstereigenschaften funktionieren.

JavaScript-Fensterobjekt-Methoden

Die Fensterobjekt-Methoden beziehen sich auf die Funktionen, die innerhalb des Fensterobjekts erstellt wurden und die verwendet werden können, um verschiedene Aktionen mit dem Browserfenster durchzuführen, z. B. wie es eine Nachricht anzeigt oder Eingaben vom Benutzer erhält.

Nachfolgend haben wir einige der am häufigsten verwendeten Window-Objekt-Methoden aufgelistet:

auswertet

Methode	Beschreibung
alert()	bezeichnet eine Methode, die eine Alert-Box mit einer Nachricht und einer OK-Schaltfläche anzeigt.
blur()	spezifiziert eine Methode, die den Fokus vom aktuellen Fenster entfernt.
clearInterval()	spezifiziert eine Methode, die den Timer löscht, der mit der Methode setInterval() gesetzt wird.
close()	spezifiziert eine Methode, die das aktuelle Fenster schließt.
confirm()	spezifiziert eine Methode, die ein Dialogfeld mit einer Meldung und zwei Schaltflächen OK und Abbrechen anzeigt
focus()	spezifiziert eine Methode, die den Fokus auf das aktuelle Fenster setzt.
open()	spezifiziert eine Methode, die ein neues Browserfenster öffnet
moveTo()	spezifiziert eine Methode, die ein Fenster an eine bestimmte Position verschiebt
moveBy()	spezifiziert eine Methode, die ein Fenster relativ zu seiner aktuellen Position verschiebt.
prompt()	spezifiziert eine Methode, die zur Eingabe auffordert.
print()	spezifiziert eine Methode, die einen Druckbefehl sendet, um den Inhalt des aktuellen Fensters zu drucken.
setTimeout()	spezifiziert eine Methode, die einen Ausdruck nach einer bestimmten Anzahl von Millisekunden evaluiert.
setInterval()	spezifiziert eine Methode, die einen Ausdruck in bestimmten Zeitintervallen (in Millisekunden)
resizeBy()	gibt den Betrag an, um den die Größe des Fensters geändert wird
resizeTo()	wird zur dynamischen Größenänderung des Fensters verwendet
scroll()	Scrollt das Fenster an eine bestimmte Stelle im Dokument
scrollBy()	Scrollt das Fenster um den angegebenen Wert
stop()	Diese Methode stoppt das Laden des Fensters

Lassen Sie uns ein Beispiel nehmen und ein paar der oben genannten Methoden in Aktion sehen:

In dem obigen Beispiel haben wir einige Fenstermethoden verwendet, Sie können weitere Methoden ausprobieren. Im nächsten Tutorial werden wir das History-Objekt kennenlernen, das eine Eigenschaft des Window-Objekts ist.