| ## Änderungen der Fenstergröße überwachen
| Hinweise zu diesen Beispielen Quelltext mit Erläuterungen Anzeigebeispiel: So sieht's aus

## Hinweise zu diesem Beispiel

Eine Verändern der Fenstergröße durch den Anwender hat bei Netscape 4.x gelegentlich die Folge, dass dieser gesetzte Variablen, dynamische Positionierungen oder Style-Sheet-Angaben "vergisst". Es ist jedoch möglich, Änderungen der Fenstergröße zu überwachen und damit gezielt auf die Änderung zu reagieren. Auch beim MS Internet Explorer oder bei Netscape 6.x ist es gelegentlich sinnvoll, auf Änderungen reagieren zu können.

Für die Überwachung der Fenstergröße wird der Event-Handler `onResize` verwendet. Dieser Event-Handler tritt ein, wenn der Anwender die Fenstergröße ändert. Sie können diesem Event-Handler eine Funktion zuordnen, die bei Größenänderungen ausgeführt wird.

Beachten Sie, dass Sie mit diesem Beispiel nur den Neuaufbau der Seite erreichen. Eventuell geänderte Variablen und Werte gehen dabei verloren. In Opera 5.12 ist es nicht möglich, die Änderung der Fenstergröße mit dem Eventhandler `onResize` zu überwachen.

## Quelltext mit Erläuterungen

Im Beispiel wird die Fenstergröße auf Änderungen hin überwacht. Sobald diese geändert wird, erfolgt ein Neuaufbau der Seite und die geänderten Größen werden jeweils mit document.write() zur Kontrolle in das Dokument geschrieben.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head>
    <title>Größenänderung überwachen</title>
    <script type="text/javascript">
    <!--

    function Fensterweite()
    {
     if (window.innerWidth) return window.innerWidth;
     else if (document.body && document.body.offsetWidth) return document.body.offsetWidth;
     else return 0;
    }

    function Fensterhoehe()
    {
     if (window.innerHeight) return window.innerWidth;
     else if (document.body && document.body.offsetHeight) return document.body.offsetHeight;
     else return 0;
    }

    function neuAufbau()
    {
     if (Weite != Fensterweite() || Hoehe != Fensterhoehe())
     window.history.go(0);
    }

    /*Überwachung von Netscape initialisieren*/
    if(!window.Weite && window.innerWidth)
      {
       window.onresize = neuAufbau;
       Weite = Fensterweite();
       Hoehe = Fensterhoehe();
      }

    //-->
    </script>
    </head>
    <body>
    <script type="text/javascript">
    <!--
     /*Überwachung von MS Internet Explorer initialisieren*/
     if(!window.Weite && document.body && document.body.offsetWidth)
      {
       window.onresize = neuAufbau;
       Weite = Fensterweite();
       Hoehe = Fensterhoehe();
      }
    //-->
    </script>
    <div id="Beispiel" style="position:absolute;top:100px;left:100px;border:solid 1px #000000;">
    Text
    </div>
    <script type="text/javascript">
    <!--
     document.write("Weite: "+Weite +" Höhe: "+Hoehe);
    //-->
    </script>

    </body></html>

### Erläuterung:

#### Die Funktionen Fensterweite() und Fensterhoehe()

Diese beiden Funktionen dienen dazu, die Fenstergröße zu ermitteln. Die Funktion `Fensterweite()` prüft, ob der Browser die Eigenschaft `window.innerWidth` kennt (das ist bei Netscape der Fall, nicht aber beim Internet Explorer). Ist dies der Fall, so wird der Wert der in dieser Eigenschaft gespeichert ist zurückgegeben. Kennt der Browser diese Eigenschaft nicht, so wird geprüft, ob er das Objekt `document.body` kennt und ob dieses Objekt die Eigenschaft `document.body.offsetWidth` kennt (das ist beim Internet Explorer der Fall, nicht aber bei Netscape). Tritt dieser Zustand ein, so wird der Wert der Eigenschaft `document.body.offsetWidth` zurückgegeben. Sollte der Browser auch diesen Zweig der Anweisung nicht verfolgen können, wird 0 zurückgegeben.
Die Funktion `Fensterhoehe()` arbeitet analog und verwendet die Eigenschaften `window.innerHeight` bzw. `document.body.offsetHeight`.

#### Überwachung für Netscape initialisieren

Beim Laden der Datei existiert die Variable `Weite` noch nicht. Da eine globale Variable immer eine Eigenschaft bzw. ein Objekt des Fensterobjektes ist, kann mit `window.Weite` geprüft werden, ob diese existiert. Netscape kennt zudem die Eigenschaft `window.innerWidth`. Deshalb arbeitet er die entsprechende Anweisung ab. Zuerst wird die Überwachung des Eventhandler `onresize` initialisiert (zum Verständnis siehe auch die allgemeine Verwendung des event-Objekts). `onResize` wird ausgelöst, sobald sich die Fenstergröße ändert und ruft dann die Handler-Funktion `neuAufbau()` auf. Anschließend wird in der Variablen `Weite` der Rückgabewert der Funktion `Fensterweite()` und in der Variablen `Hoehe` der Rückgabewert der Funktion `Fensterhoehe()` gespeichert. Damit stehen beide Variablen für weitere Verarbeitungsaufgaben zur Verfügung.

#### Überwachung für den MS Internet Explorer initialisieren

Die Überwachung für den Internet Explorer gestaltet sich ähnlich. Im Unterschied zum Netscape Navigator benötigt er jedoch das Objekt `document.body`. Dieses Objekt steht jedoch erst nach dem Laden des Body-Tags zur Verfügung. Deshalb ist der entsprechende Scriptbereich nicht im Dateikopf, sondern `body`-Bereichs des Dokuments notiert. Auch der Netscape 6 kennt das Objekt `document.body` und dessen Eigenschaften. Er führt jedoch diesen Scriptbereich nicht aus, da dieser Browser zum Laufzeitpunkt die Variable `Weite` bereits kennt.

#### Die Handler-Funktion neuAufbau()

Die Funktion `neuAufbau()` wird aufgerufen, wenn der Event-Handler `onResize` aktiv wird. Sie vergleicht den Wert der Variablen `window.Weite` mit dem Rückgabewert der Funktion `Fensterweite()` und den Wert der Variable `window.Hoehe` mit mit dem Rückgabewert der Funktion `Fensterhoehe()`. Daran erkennt sie, ob sich die Fenstergröße verändert hat. In diesem Fall wird durch die Verwendung der Methode history.go() ein Neuaufbau der Seite veranlasst, ohne dass diese vom Server erneut geladen werden muss. Wird der Event-Handler `onResize` aufgerufen, ohne dass eine reale Veränderung der Fenstergröße stattgefunden hat - das kann gelegentlich passieren - geschieht nichts, da die Bedingung zum Neuladen nicht erfüllt ist.

| Allgemeines zu dynamischem HTML
| Fehlerbehandlung mit dem try..catch - Statement

© 2001 selfhtml@teamone.de