Artikel - Detailansicht

Icon Aktuelles Ermittlung der Browserfenstergrösse

Wenn man in einer Webapplikation ein umfangreiches Userinterface per HTML implementieren will,
hat man oft das Problem, dass man nicht weis, wie gross der User das Browserfenster gezogen hat.
Bei einfachen HTML-Elementen kann man oft dynamisch arbeiten, bei Formularen oder Applets lässt
sich mit einfachen HTML jedoch keinen dynmamische Anpassung an die Fenstergrösse erreichen.
Deshalb werden wir im folgenden mit CF und Javascript beispielhaft ein Applet an die
Browserfenstergrösse anpassen.
Das Applet (beispielsweise könnte es ein Chatapplet sein) soll so gross wie möglich in der Seite dargestellt werden.

Dazu müssen wir die Fenstergrösse des Browsers auslesen und dann entsprechend diesen Werten das <APPLET>-Tag mit den passenden WIDTH- und HEIGHT-Attributen ausstatten.
Die Fenstergrösse lässt sich nur mit Javascript auf der Clientseite (Browser) auslesen. Um diese Werte aber in CF zur Verfügung zu haben, müssen wir sie wieder zum CF-Server transportieren.
Es ist also ein zusätzlicher Seitenaufruf nötig um die Werte zu ermitteln.
Die erste CF-Seite liest mit Javascript die Höhe und Breite des Fensters (in diesem Beispiel genaugenommen die Grösse der freien Fläche im Browserfenster) aus und ruft eine weitere CF-Seite aus mit den Werten als Parameter.
Der Javascript-Code der ersten Seite (check.cfm) sieht wie folgt aus:

<head>
   <title>check.cfm</title>
</head>

<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--
function test(){
if (document.layers)  {

  //Netscape-----------------
   w=window.innerWidth;
   h=window.innerHeight;
   }
else if (document.all){
   // IE----------------------
  w=document.body.clientWidth;
  h=document.body.clientHeight;
  }
else{
   alert('Browser geht nicht!');
  }

top.location.replace("applet.cfm?w="+w+"&h="+h);
}

//-->
</SCRIPT>
<body onload="test()">
Moment mal...
</body>


Mit document.body.clientHeight und document.body.clientWidth lässt sich im IE die Grösse der Browserfläche des Users im Pixel bestimmen ohne Rand und Scrollbalken. Den gleichen Werte erhält man im NS mit window.innerWidth und window.innerHeight. Mit replace() laden wir dann die Seite, die das Applet darstellen soll. Als URL-Parameter geben wir die Höhe und Breite der Fensterfläche mit.

In der Applet-Seite (applet.cfm) berechnen wir eine passenden Grösse (etwas kleiner als die zur Verfügung stehenden Fläche) für das Applet und erzeugen dynamisch das passenden Applet-Tag.

<head>
  <title>applet.cfm</title>
</head>

<body bgcolor="555555">
<cfset iWidth=round(URL.w* 0.95 )>
<cfset iHeight=round(URL.h*
0.95 )>

<cfoutput>

<APPLET name="chat" width="#iWidth#" height="#iHeight#" archive="chat.jar">
</APPLET>
</cfoutput>
</body>

Steffen Goldfuss steffen@goldfuss.de - 07.12.2000


Zurück


Das deutsche ColdFusion-Forum cfml.de ist das Portal für Einsteiger und Experten zum Thema ColdFusion und der ColdFusion Markup Language (CFML).

© 2017 Webdesign & Hosting: CHC ONLINE Kassel | SOLVA Content-Management-System CMS
Urlaub-Angebote.de - Urlaub mit Bestpreis-Garantie buchen