SELFHTML: JavaScript / Anwendungsbeispiele / Änderungen der Fenstergröße überwachen
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Wie Sie Änderungen der Fenstergröße überwachen können.
Keywords: SELFHTML, JavaScript, Resize, onresize, Fenstergröße
Date: 2005-08-22T21:21:39+02:00

| # Ä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 Stylesheet-Angaben "vergisst". Es ist jedoch möglich, Änderungen der Fenstergröße zu überwachen und damit gezielt auf die Änderung zu reagieren. Auch beim Internet Explorer oder bei Netscape 6 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 bis Version 6 ist es nicht möglich, die Änderung der Fenstergröße mit dem Event-Handler `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.innerHeight;
      } else if (document.body && document.body.offsetHeight) {
        return document.body.offsetHeight;
      } else {
        return 0;
      }
    }

    function neuAufbau () {
      if (Weite != Fensterweite() || Hoehe != Fensterhoehe())
        location.href = location.href;
    }

    /* Ü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 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 Event-Handler `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 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 Script-Bereich 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 Script-Bereich 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 dem Rückgabewert der Funktion `Fensterhoehe()`. Daran erkennt sie, ob sich die Fenstergröße verändert hat. In diesem Fall wird die Eigenschaft location.href mit sich selbst überschrieben, was einen Neuaufbau der Seite bewirkt. 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

© 2007 Impressum