Javascript Window – Browserfenster

Das window-Objekt

HTML body erzeugt automatisch ein Window-Objekt in Javascript. In Browsern mit Tabs ist jedes Tab ein selbstständiges Fenster, also ein Window-Objekt.

window mit history, navigator, document — Javascript als Programmiersprache wird von der ECMA standardisiert (hier: Javascript Basis), aber das Window-Objekt und (fast) alles, was darunter liegt, legt das W3C fest: HTML Living Standard — Last Updated 21 February 2024.

Unterhalb des window-Objekts konzentriert sich JavaScript heute mehr auf das document-Objekt. navigator, history, screen und frames haben viel von ihrer Bedeutung verloren bzw. können durch CSS angesprochen und ersetzt werden.

Das Window-Objekt informiert über Höhe und Breite des Browserfensters sowie über die URL, die Adresse der aktuellen Webseite und den Speicher im Browser (localStorage und sessionStorage). Die Window-Methoden und auch die Events drehen sich an die Interaktion mit dem Benutzer.

Methoden des window-Objekts

window.alert(),
window.confirm(),
window.prompt(): öffnen modale Fenster / Dialogfenster für die Kommunikation mit dem Benutzer
print: druckt den Inhalt des aktuellen Fensters
window.open()
window.close(): öffnet bzw. schließt Browserfenster
window.setTimeout()
window.clearTimeout(): Anweisungen nach einer bestimmten Zeit timeout (angegeben in Millisekunden) ausführen
window.setInterval()
window.clearInterval(): Anweisungen in einem Interval von d Millisekunden wiederholen
window.location(): gibt die vollständige URL – die Adresse der Webseite – zurück
window.scrollTo(): scrollBy und scrollTo springen zu den angegebenen Koordinaten
window.addEventListener(): zentrale Funktion, die Events und die dazugehörigen Aktionen für ein Element registriert.
window.removeEventListener(): entbindet den Event Handler vom Event.
window.localStorage(): stellt Speicher ohne Ablaufdatum im Browser des Benutzers zur Verfügung
window.sessionStorage(): speichert Daten im Browser des Benutzers
getComputedStyle / getDefaultComputedStyle: gibt die endgültigen berechneten CSS- Eigenschaften nach der Anwendung aller Stylesheets eines Elements zurück.
matchMedia: Media Queries erfragen Eigenschaften des Geräts, auf dem die Webseite gerendert wird und matchMedia ist das Äquivalent zur Media Query in CSS.
window.requestAnimationFrame(), window.cancelAnimationFrame(): ruft die Animations-Funktion vor jedem erneuten Rendern (»Refresh«) des Browserfensters auf und erzeugt weiche Übergänge von einem Frame zum nächsten.

Intersection Observer ist keine Methode des window-Objekts, sondern ein API (Application Programming Interface), und beobachtet asynchron (nebenher, ohne irgendetwas zu blockieren), ob ein Element im Browserfenster sichtbar wird.

window properties – Eigenschaften

window.closed Boolean: Ein boolescher Wert, der angibt, ob das angesprochene Fenster/ der Frameset geschlossen wurde.
window.console: Referenz auf das console-Objekt mit den Informationen zu den Elementen des Dokuments und seinen CSS-Stilen, sowie der log-Ausgabe von Javascript.
window.document: das Dokument mit dem DOM
history: Das History-Objekt des Fensters
window.innerWidth | window.innerHeight Integer: verfügbare Breite und Höhe des Browserfensters in Pixeln
localStorage: speichert die Schlüssel/Wertpaare des Browsers ohne Ablaufzeit.
window.location: die URL – Adresse der aktuellen Seite
window.name (lesen und ändern) String: liest bzw. ändert den Namen des aktuellen Fensters. Das Browserfenster hat per Vorgabe keinen Namen, aber der String window.name ist immer vorhanden, auch wenn er leer ist. window.name überträgt Daten zwischen Fenster – selbst bei Dokumenten aus verschiedenen Domainen.
navigator: Gibt das Navigator-Objekt mit den Informationen zur Geolocation und Cookies zurück.
window.opener: Das Fenster, von dem aus das aktuelle Fenster geöffnet wurde
window.orientation: Ausrichtung mobiler Geräte (Hochformat, Querformat)
window.outerWidth | window.outerHeight Integer: Größe des Fensters mit allen Elementen wie Scrollleisten und Titelleiste in Pixeln
window.screen Referenz: Ermittelt Eigenschaften des Bildschirms
sessionStorage: speichert Schlüssel-Wertpaare im Browser für die Dauer einer Session
self | window Referenz: window.self ist ein Verweis auf das aktuelle Window-Objekt – ein Synonym für window. window wiederum ist ein Verweis auf das aktuelle Fenster, in dem das Script agiert.
status: gibt des Text der Statusleiste zurück oder setzt ihn.

Window Events

Ereignisse, die vom Window-Objekt ausgelöst werden

load: löst aus, wenn die vollständige Seite mitsamt aller Ressourcen geladen ist
unload: löst aus, wenn das Fenster bzw. Tab geschlossen wird oder der Benutzer die Seite verläßt
resize: feuert, wenn die Größe des Browserfensters geändert wird
scroll: feuert, wenn der Benutzer über die Seite scrollt
beforeunload: feuert unmittelbar vor dem Verlassen der Seite, z.B. um den Benutzer zu warnen, dass er ungespeicherte Änderungen verlieren könnte
focus: wenn das Fenster bzw. Tab aktiviert wird
blur: wenn das Fenster bzw. Tab den Fokus verliert
orientationchange: löst aus, wenn ein mobiles Gerät von Hoch- ins Querformat (oder umgekehrt) gedreht wird
hashchange: wenn sich der #hash-Teil der URL ändert
popstate: bei einer Änderung des Verlaufs
online: wenn eine Netzwerkverbindung zustande kommt
offline: wenn die Netzwerkverbindung abbricht

window und frames

frameElement: gibt ein iframe-Element des aktuellen Window zurück.
frames: Alle iframe-Elemente des aktuellen Fensters
window.frames (frameID): ein Array mit allen FRAME-Elementen des aktuellen Fensters
window.frames.length: Anzahl der Frames, die in diesem Frame oder Fenster enthalten sind.
window.parent (lesen) Referenz: Verweis auf das Fenster oder den Frame, die das aktuelle Fenster aufgerufen haben. Wenn das aktuelle Fenster ein Frame ist, ist window.parent ein Verweis auf das Fenster, das den Frame enthält
window.top: Synonym für das oberste Browserfenster