SELFHTML: JavaScript / Anwendungsbeispiele / Änderungen der Fenstergröße überwachen

SELFHTML/Navigationshilfen JavaScript/DOM Anwendungsbeispiele
	Ä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

SELFHTML/Navigationshilfen JavaScript/DOM Anwendungsbeispiele