Javascript window • Größe des Browserfensters

Okt 2009

Javascript window :: Größe des Browserfensters

innerWidth | innerHeight Integer

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

Wird von IE nicht unterstützt. Das Äquivalent für IE ist

document.body.clientWidth | 
document.body.clientHeight

outerWidth | outerHeight Integer

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

Wird von IE nicht unterstützt und es gibt auch kein Äquivalent.

pageXOffset | pageYOffset Integer

Zahl der Pixel, um die das aktuelle Dokument von der oberen linken Ecke des Fensters horizontal bzw. vertikal gescrollt wurde

Wird von IE nicht unterstützt. Das Äquivalent für IE ist

document.body.scrollLeft | 
document.body.scrollTop

screenX | screenY Integer

X/Y-Kooridinaten des Browsers auf dem Monitor.

Wird von IE nicht unterstützt. Das Äquivalent für IE ist

window.screenLeft | 
window.screenTop

Anwendungen, die eine Anpassung von Elementen an die Größe des Browserfensters durchführen, brauchen die aktuelle Größe des Browserfensters sowie die Angaben zum verfügbaren Platz innerhalb des Fensters, denn der Browser nimmt einen Teil der Fenstergröße für seine eigenen Elemente wie Adressleiste, Titelleiste, Tabs, Statuszeile und Scrollleiste in Anspruch.

IE: Innere 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:

Innere Größe des Browserfensters

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);

Position des Cursors

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

Die Position des Mauszeigers sind keine Eigenschaften des Fensters, sondern Eigenschaften des Event-Objekts.

pageX / pageY

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

Wird von IE 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;
}

Stil mit {stil}