CSS, HTML und Javascript mit {stil}

Javascript window • Browserfenster

JS Window – Browserfenster:

Das Window-Objekt ist die Schnittstelle zum Browserfenster 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. In Browsern mit Tabs ist jedes Tab ein selbstständiges Fenster, also ein Window-Objekt.

Javascript window Object Hierarchie des window-Objekts mit Navigator, History, Frames und dem DOM
Javascript als Sprache wird von der ECMA standardisiert, aber das Window-Objekt und (fast) alles, was darunter liegt, legt das W3C fest: Window Object 1.0 W3C.

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).
pageXOffset | pageYOffset Integer
gibt an, wie weit das aktuelle Dokument von der oberen linken Ecke des Fensters horizontal bzw. vertikal gescrollt wurde (ab IE9).
window.screen Referenz
Ermittelt Eigenschaften des Bildschirms
sessionStorage
speichert Schlüssel-Wertpaare im Browser für die Dauer einer Session
scrollX / scrollY
Alias von pageXOffset und pageYOffset
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
windowModell desBrowserfensters ● documentDocumentObject frames ● locationURL desaktuellen Fensters historyZuvor besuchteURL (nur lesen) ● navigatorDer Browser,der die Seiteaktuell anzeigt ● screenEigenschaftendes Monitors