CSS, HTML und Javascript mit {stil}

Javascript window • Browserfenster

JS Window – Browserfenster

Das Window-Objekt ist die Schnittstelle zum Browser mit Breite und Höhe des Viewports, Events und Timern und das API zur URL und Geolocation.

Die Eigenschaften des Window-Objekts geben Aufschluss über das Browserfenster, die Methoden des Window-Objekts steuern Animationen und erfragen CSS-Eigenschaften, window-Events wie onload prüfen, ob das Dokument und alle Ressourcen geladen sind.

HTML body erzeugt automatisch ein Window-Objekt in Javascript.

Dass Javascript sich mit Browsern und Webseiten so gut versteht, verdankt es seinen vorgefertigten Objekten. Die Objekte des Browserfensters liegen in einer leicht nachvollziehbaren Hierarchie.

Javascript als Sprache wird von der ECMA standardisiert, aber das Window-Objekt und (fast) alles, was darunter liegt, legt das W3C fest. Dort hat das Document Object Model große Karriere gemacht, aber das Windows-Objekt kam nie richtig zum Zuge: Window Object 1.0 W3C.

Auflösung, URL und Screen

Dennoch hat das Window-Objekt nützliche Informationen zu bieten: die Höhe und Breite des Browserfensters sowie die URL, die Adresse der aktuellen Webseite.

Javascript window Object Hierarchie des window-Objekts mit Navigator, History, Frames und dem DOM

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).
window.screen Referenz
Ermittelt Eigenschaften des Bildschirms

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

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.

window.closed Boolean

Ein boolescher Wert, der angibt, ob das angesprochene Fenster/ der Frameset geschlossen wurde.

window.devicePixelRatio

Verhältnis physikalische Pixel : geräteabhängige Pixel.

window.image()

Neues Bild erzeugen

innerWidth | innerHeight Integer

verfügbare Breite und Höhe des Browserfensters in Pixeln

Ab IE 9 Das Äquivalent für ältere IE-Versionen war

document.body.clientWidth | document.body.clientHeight
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.

Mit window.name können Daten zwischen Fenster übertragen werden – sogar bei Dokumenten aus verschiedenen Domainen.

outerWidth | outerHeight Integer

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

Ab IE 9 , kein Äquivalent für ältere IE-Versionen

pageXOffset | pageYOffset Integer

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

Ab IE 9 Das Äquivalent für ältere IE-Versionen war

document.body.scrollLeft | document.body.scrollTop
scrollbar / toolbar / locationbar / menubar
  • ob das Fenster eine Scrollbar hat
  • ob das Fenster eine Toolbar bzw. Browserleiste mit den Buttons Vor und Zurück hat
  • ob das Fenster eine Adresszeile hat
  • ob das Fenster eine Menüzeile hat

window Methoden

alert
gibt Text in einem Dialogfenster aus
blur
deaktiviert das Fenster
focus
sorgt dafür, dass ein neues Fenster nach oben kommt.
requestAnimationFrame / cancelAnimationFrame
Ruft vor jedem erneuten Rendern (Refresh) des Browserfensters eine Animations-Funktion auf.
setInterval / clearInterval
setInterval wiederholt Anweisungen in einem Interval von d Millisekunden, um den Eindruck einer übergangslosen Animation zu erzeugen.
setTimeout / clearTimeout
setTime gibt an, dass Anweisungen nach einer bestimmten Zeit timeout (angegeben in Millisekunden) ausgeführt werden.
open / close
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.
encodeURI / decodeURI / encodeURIComponent / decodeURIComponent
encodeURI nimmt einen unverschlüsselten String gibt die encodierte Version eines Strings zurück. Dabei werden bestimmte Zeichen durch ein, zwei oder drei UTF-8-Escape-Sequenzen ersetzt.
eval
wertet einen String aus und führt ihn als JavaScript-Code aus. Gilt heute als veraltet und unerwünscht.
fetch
Das fetch API ist eine neue Syntax für AJAX-Requests, bietet promises und ist eleganter als ein XMLHttpRequest.
getComputedStyle / getDefaultComputedStyle
gibt die endgültigen berechneten CSS- Eigenschaften nach der Anwendung aller Stylesheets eines Elements zurück.
isFinite
prüft, ob eine Zahl endlich ist oder nicht
isNaN
prüft, ob ein Wert eine illegale Zahl (NaN: not a number) ist
matchMedia
Media Queries erfragen Eigenschaften des Geräts, auf dem die Webseite gerendert wird und matchMedia ist das Äquivalent zur Media Query in CSS.
parseFloat
Parst einen String "x" und gibt die erste Fliesskommazahl – also die erste Zahl mit einem Dezimalpunkt – zurück.
parseInt
Parst (analysiert) einen String "x" und gibt die erste ganze Zahl (Integer) zurück, die gefunden wird.
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.

window Events

onload
wird aufgerufen, wenn das Dokument oder der Frameset vollständig mit allen Bildern und Plugins im Fenster geladen ist
onunload
wird aufgerufen, wenn der Browser das Dokument verlässt
onfocus
wird aufgerufen, wenn das Fenster den Fokus erhält
onblur
wird aufgerufen, wenn das Fenster den Fokus verliert
onerror
wird aufgerufen, wenn ein JavaScript-Fehler auftritt. Wird mit drei Argumenten aufgerufen: Fehlermeldung, URL des fehlerhaften Dokuments, Zeilennummer des Fehlers
onresize
wird aufgerufen, wenn die Größe des Fensters geändert wird

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
windowModell desBrowserfensters ● documentDocumentObject frames ● locationURL desaktuellen Fensters historyZuvor besuchteURL (nur lesen) ● navigatorDer Browser,der die Seiteaktuell anzeigt ● screenEigenschaftendes Monitors