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 der der letzten Zelle der ersten Zeile:

<td>
   <script language="JavaScript">
      document.write(screen.availHeight);
   </script>
   Pixel 
</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 ist 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

Dieses Tutorial wurde bereitgestellt von Prof. Dr. Rolf Hirte, Technische Fachhochschule Wildau. Vielen Dank an dieser Stelle!
Viel Spass beim Lernen und beim Erstellen eigener JavaScripts.
Solltet ihr ein n�tzliches Script entwerfen, von dem ihr meint dass es gut auf diese Seite passen w�rde, dann sendet es doch einfach ein :-)

Bildschirm- und Fensterdaten ermitteln

Bildschirmdaten ermitteln, das Objekt screen

Fensterdaten ermitteln mit dem Objekt window

Login