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.

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

Größe des Browserfensters / ViewPorts

window.onresize reagiert bei Änderungen der Größe des Browserfensters. Die modernen Browser unterstützen window.innerWidth und window.innerHeight.
Sie unterstützen ebenfalls document.documentElement.clientWidth und document.documentElement.clientHeight, allerdings nicht konsistent, denn diese Eigenschaften liefern entweder die Größe des Browserfensters oder die Abmessungen des Dokuments, je nach Browser und Status.

Die Anpassung des Layouts an die Größe des ViewPorts geschieht im responsiven Layout mit CSS Media Queries, aber die Frage, ob ein Element im Viewport sichtbar ist, muss mit Javascript geklärt werden.

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.

Auflösung, URL und Screen

Das Window-Objekt informiert über die Höhe und Breite des Browserfensters sowie über die URL, die Adresse der aktuellen Webseite.

Bei History, Location, Navigator und Screen holt sich Javascript Informationen: Auflösung und Farbtiefe des Monitors, die Historie des Browserfensters (wo war Benutzer vorher?), Betriebssystem, Browsertyp und die Adresse der Webseite. Der Manipulation dieser Objekte sind aber enge Grenzen gesetzt.

window.document

Document-Objekt des aktuellen Fensters – Zentrale für das Scripting von Internetseiten. Das Document Object – DOM – liegt zwar unter dem Window-Objekt, ist aber der Kern des Javascripts für Webseiten.

window.location (lesen/schreiben)

URL – die Adresse – der Seite im aktuellen Fenster.

window.history(index) (nur lesen)

die URLs, die vom aktuellen Fenster besucht wurden.

window.navigator Referenz

Verweis auf das Navigator-Objekt (den Browser).

Eine Reihe von alten Methoden und Eigenschaften des Javascript window-Objekts haben ihre Bedeutung verloren: frames ist heute überflüssig, resizeTo/resizeBy und moveTo werden von den Browsern blockiert. window.navigator liefert keine Informationen über den Browser und das Betriebssystem, auf denen Javascript sicher agieren kann.

Dafür hat das window-Objekt eine neue Methode: window.matchMedia ist das Äquivalent zu Media Query in CSS3 und fragt Eigenschaften der Anzeige auf dem jeweiligen Gerät ab. Dazu gibt es eigene Events, die Größenänderungen und Änderungen der Orientierung des Browserfensters entdecken.

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

frameElement

gibt ein iframe-Elemente des aktuellen Window zurück.

frames

Alle iframe-Elemente des aktuellen Fensters

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.outerWidth | window.outerHeight Integer

Größe des Fensters mit allen Elementen wie Scrollleisten und Titelleiste in Pixeln (ab IE9).

window.screen Referenz

Ermittelt Eigenschaften des Bildschirms

sessionStorage

speichert Schlüssel-Wertpaare im Browser für die Dauer einer Session

pageXOffset | pageYOffset alias scrollX / scrollY

gibt an, wie weit das aktuelle Dokument von der oberen linken Ecke des Fensters horizontal bzw. vertikal gescrollt wurde (ab IE9).

Alias von pageXOffset und pageYOffset
window.pageXOffset == window.scrollX; // ist immer true

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.

top

gibt das oberste Fenster zurück

window Methoden

addEventListener / removeEventListener

Registriert bzw. entfernt einen EventHandler für das Fenster.

alert

gibt Text in einem Dialogfenster aus

blur

deaktiviert das Fenster

requestAnimationFrame / cancelAnimationFrame

Ruft vor jedem erneuten Rendern (Refresh) des Browserfensters eine Animations-Funktion auf.

clearInterval / setInterval

setInterval wiederholt Anweisungen in einem Interval von d Millisekunden, um den Eindruck einer übergangslosen Animation zu erzeugen.

clearTimeout / setTimeout

setTime gibt an, dass Anweisungen nach einer bestimmten Zeit timeout (angegeben in Millisekunden) ausgeführt werden.

close / open

window.open öffnet ein neues Fenster oder ein Fenster mit einer URL. window.close schließt das aktuelle Fenster oder das Fenster, das das aktuelle Fenster geöffnet hat.

confirm

Zeigt ein modales Dialogfenster mit einem optionalen Text und den Buttons OK und Abbrechen an, mit dem der Benutzer eine Aktion bestätigen kann.

focus

bringt ein neues Fenster nach oben.

getComputedStyle / getDefaultComputedStyle

gibt die endgültigen berechneten CSS- Eigenschaften nach der Anwendung aller Stylesheets eines Elements zurück.

getSelection

gibt ein Selection-Objekt mit der aktuellen Text-Auswahl zurück (wenn der Benutzer einen Text markiert hat)

matchMedia

Media Queries erfragen Eigenschaften des Geräts, auf dem die Webseite gerendert wird und matchMedia ist das Äquivalent zur Media Query in CSS.

moveBy / moveTo

Bewegt das Fenster relativ zu seiner aktuellen Position bzw. zu einer bestimmten Position.

print

druckt den Inhalt des aktuellen Fensters

prompt

Zeigt ein modales Dialogfenster, das den Besucher um um eine Eingabe bittet, z.B., wenn der Besucher einen Wert eingeben soll. Wird heute kaum noch benutzt.

scroll (veraltet)

scrollt das Fenster um einen bestimmten Betrag

scrollBy / scrollTo

scrollt das Fenster zu bestimmten Koordinaten bzw. um eine bestimmte Zahl von Pixeln

setInterval / setTimeout

Ruft eine Funktion in Intervallen auf bzw. nach einem bestimmten Timeout auf.

stop

Unterbricht das Laden des Fensters

Window Events

Events wie onload, onchange, onclick und ontouch sind Eigenschaften des Window-Objekts. Events werden in Kombination mit Funktionen benutzt, die erst aufgerufen werden, wenn ein bestimmtes Ereignis eintritt (z.B. wenn der Benutzer auf einen Button klickt).

window und frames

window.frames (frameID)

ein Array mit allen FRAME-Elementen des aktuellen Fensters

window.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

top

Synonym für das oberste Browserfenster