Javascript window • Browserfenster

Javascript Window – Browserfenster

Javascript window greift auf das Browserfenster mit Breite und Höhe des Viewports, Events und Timern und das API zur URL und Geolocation zu. Die Eigenschaften des Window-Objekts geben Aufschluss über Breite und Höhe des Browserfensters. window-Events wie onload prüfen, ob das Dokument und alle Ressourcen geladen sind.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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 Sprache wird von der ECMA standardisiert, aber das Window-Objekt und (fast) alles, was darunter liegt, legt das W3C fest: HTML Living Standard — Last Updated 21 February 2024.

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.

window abmessungen dimension

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

function isElementInViewport(el) {
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document. documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document. documentElement.clientWidth)
  );
}

Quelle Javascript: Element in viewport? auf Github.

Wenn jetzt IE10/IE11 keine Rolle mehr spielt, kann der Intersection Observer eingesetzt werden, der effizienter feststellt, ob ein Element in den Viewport gekommen ist.

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