CSS, HTML und Javascript mit {stil}

Javascript window: Position im Browserfenster

Browserfenster und Viewport

Javascript Window repräsentiert das Browserfenster: Position, Breite und Höhe des Dokuments im Viewport, verfügbarer Platz und Position des Mauszeigers.

Javascript braucht die aktuelle Breite und Höhe des Dokuments im Browserfenster für die Anpassung von Layout-Elementen der HTML-Seite.

Die Position des Mauszeigers im Dokument ist allerdings kein Element von window, sondern des Events.

Mit innerWidth bzw. innerHeight und outerWidth bzw. outerHeight kann Javascript den Platz im Browserfenster nutzen.

Größe des Browserfensters

Das HTML-Dokument ist i.d.R. größer als das Browserfenster – meist in Hinsicht auf die Höhe des Dokuments (dann entstehen die vertikalen Scrollleisten), u.U. aber auch breiter als das Browserfenster (dann entstehen auch horizontale Scrollleisten).

Ab IE 9 muss sich Javascript nicht mehr bei der Berechnung der Höhe und Breite des verfügbaren Platzes mit einem Schwall von zusätzlichen Befehlen für die älteren Versionen von IE belasten.

Interaktives Diagramm: Klick or Touch

Position des Mauszeigers

Die Position des Mauszeigers ist keine Eigenschaft des Javascript window-Objekts, sondern eine Eigenschaft des Events.

Das Javascript Event-Objekt bietet zwar viele Eigenschaften für die Position des Cursors, aber außer clientX / clientY ist keine Browser-übergreifende Eigenschaft darunter. Das ist aber der Abstand zur oberen linken Ecke des Monitors und nicht die Position relativ zum Dokument im Browserfenster.

pageX / pageY

Horizontale/vertikale Position des Cursors beim Eintreten des Ereignisses in Bezug auf die Seite

Javascript pageX / pageY wird von älteren Version von Internet Explorer nicht unterstützt. IE speichert den Abstand des Cursors von der oberen linke Ecke des Dokuments in document.documentElement.clientLeft bzw. document.documentElement.clientTop und im Quirks-Mode in document.body.

Position des Cursors im Dokument

function getCursor(e) {
   e = e || window.event;
   var cursor = {x:0, y:0};
   cursor.x = e.pageX ? e.pageX : e.clientX + 
         (document.documentElement.scrollLeft || document.body.scrollLeft) - 
         (document.documentElement.clientLeft || 0);
   cursor.y = e.pageY ? e.pageY : e.clientY + 
         (document.documentElement.scrollTop || document.body.scrollTop) - 
         (document.documentElement.clientTop || 0);
   return cursor;
}

IE6/7/8: Größe des Browserfensters

Um den verfügbaren Platz für ein Dokument innerhalb des Browserfensters sowohl in Firefox, Opera und Safari als auch in Internet Explorer zu berechnen, muss für IE im Standard-Mode window.document und für IE im Quirks-Mode window.document.body genutzt werden:

var width = window.innerWidth ||                      // alle Browser
  (window.document.documentElement.clientWidth ||     // IE im Standard-Mode
   window.document.body.clientWidth);                 // IE im Quirks-Mode
var height = window.innerHeight || 
   (window.document.documentElement.clientHeight || 
    window.document.body.clientHeight);