Bildschirm- und Fensterdaten ermitteln


JavaScript ist dazu bestimmt, die Seitengestaltung zu unterstützen. HTML als Beschreibungssprache wurde geschaffen, weil die fertige Präsentation unabhängig von der Bildschirmauflösung funktionieren soll. Mit HTML allein kann man das Wort Gestaltung getrost vergessen. JavaScript schafft insofern Abhilfe, als es die Bildschirmdaten des Nutzers ermitteln und innerhalb der Präsentation Anpassungsmaßnahmen organisieren kann. Dafür gibt es zunächst einige Eigenschaften des Objektes "screen", die man zwar nicht setzen, wohl aber lesen und berücksichtigen kann. Weitere Möglichkeiten bietet das Objekt "window", dessen Möglichkeiten zur Bestimmung des Darstellungsbereiches auf dieser Seite ebenfalls beschrieben werden.


Bildschirmdaten ermitteln, das Objekt screen

Hier die Übersicht der Eigenschaften von screen. Die rechte Spalte zeigt die aktuellen Werte Ihres Bildschirms an:

availHeight verfügbare Höhe, also Vollbild minus Taskbar Pixel 
availLeft Abstand der linken Kante des verfügbaren Schirmbereiches vom Rand in Pixeln, also Breite einer links angeordneten Taskbar Pixel 
availTop Abstand der oberen Kante des verfügbaren Schirmbereiches vom Rand in Pixeln, also Breite einer oben liegenden Taskbar Pixel 
availWidth verfügbare Breite, also Vollbild minus Taskbar Pixel 
colorDepth Farbtiefenzahl in Bits, die zur Darstellung der Farbe eines Pixels verwendet wird. Kann auch als undefined (Netscape) oder null (MS Internet Explorer) wiedergegeben werden. Bit 
height Höhe des kompletten Anzeigebereiches also z.B. 480, 600 oder 768  Pixel Pixel 
pixelDepth Farbauflösung Bit 
width Breite des kompletten Anzeigebereiches also z.B. 640, 800 oder 1024 Pixel Pixel 

Wie und wann ermittelt man diese Daten? Es gibt mehrere Möglichkeiten und es hängt davon ab, wozu man sie nutzen möchte.

Da sich die Daten während einer Sitzung kaum ändern werden, kann man diejenigen, die man benötigt, bei Laden der Startseite ermitteln und, soweit sie nicht sogleich zu Konsequenzen führen, einer Variablen zuweisen.

<script language="JavaScript">
   var aufloes = screen.width + "*" + screen.height;
   var farbtiefe = screen.pixelDepth;
   ...
</script>

Will man sie einfach nur anzeigen, wie ich es in der Tabelle oben getan habe, dann lautet der Code innerhalb jeder Tabellenzelle ähnlich, wie derjenige der letzten Zelle der ersten Zeile:

<td>
   <script language="JavaScript">
      document.write(screen.availHeight);
   </script>
   Pixel&nbsp;
</td>

Die Daten können aber auch zu Konsequenzen führen. Etwa zu freundlichen Hinweisen, wenn die Seitendarstellung behindert oder die Farbtiefe zu gering ist:

<script language="JavaScript">
   var verschwendung = Math.round(1000-(screen.availHeight*screen.availWidth)/(screen.height*screen.width)*1000)/10;
   if (verschwendung>1)alert("Sie verschwenden " + verschwendung + "% des kostbaren Platzes auf dem Bildschirm!");
      if (screen.pixelDepth<32)alert("Sie werden von meinen Bildern enttäuscht sein,\nwenn sie nicht mindestens 256 Farben eingestellt haben!");
</script>

oder schließlich die wichtige Reaktion auf die Fenstergröße. Sie erzeugen etwa einen Satz durchgestylter Startseiten für drei verschiedene Bildbreiten mit den Namen welcome.htm (für 640 Pixel), st_800.htm und st_1024.htm. In den Kopf der Seite welcome.htm schreiben Sie nun:

<script language="JavaScript">
   if(screen.width > 800)
      window.location.href = "st_1024.htm";
   if (screen.width > 640)
      window.location.href = "st_800.htm"; 
</script>

Fensterdaten ermitteln mit dem Objekt window

Das Objekt window  ist  in der Objekthierarchie von JavaScript das oberste Objekt, denn es bildet den Container für alle Anzeigen. Über das Objekt window, das auch mit self anzusprechen ist, können Daten des Dokumentenfensters erfragt werden. Im Zusammenhang mit visible funktioniert das alles nicht beim IExplorer. Deshalb sind in der Tabelle nur solche Abfragen enthalten, die der IExplorer wenigstens ohne Fehlermeldung ignoriert. Dabei fallen eine Reihe an sich interessanter Möglichkeiten weg: menubar, personalbar, scrollbars, statusbar, toolbar.
Hier die Tabelle der Daten. Alle werden beim Seitenstart ermittelt und in die rechte Spalte eingetragen. Das ist bei den window-Daten nicht unbedingt sachgemäß. Wenn auf solche bedienabhängigen Daten reagiert werden soll, müssen sie unmittelbar vor ihrer Verwendung bestimmt werden.

defaultStatus Text der Statuszeile  
innerHeight Höhe des tatsächlichen Browserfensters Pixel 
innerWidth Breite des tatsächlichen Browserfensters Pixel 
name Name des Fensters
outerHeight Höhe des gesamten Fensters Pixel 
outerWidth Breite des gesamten Fensters Pixel 
pageXOffset Fensterstartposition von links, scrollabhängig, hier wird Position beim Seitenstart angezeigt Pixel 
pageYOffset Fensterstartposition von oben, scrollabhängig, hier wird Position beim Seitenstart angezeigt Pixel 
status zeigt oder setzt den Inhalt der Statuszeile