Stil mit {stil}

Jan 2009

Javascript resize • Beim Verkleinern oder Vergrößern des Browserfensters

resize • Javascript Event für FRAME, WINDOW

Javascript resize ruft einen Event Handler auf, wenn das Fenster des Dokuments verkleinert oder vergrößert wird – z.B. um das Layout über die Möglichkeiten von HTML hinaus an die Größe des Browserfensters anzupassen.

Das resize-Ereignis feuert in Internet Explorer und Safari während eines resize kontinuiertlich, in Firefox feuert das Ereignis erst, wenn der Benutzer die Größenänderung beendet. Darum wird auch das Bild in Firefox in sichtbaren Sprüngen erst angepasst, wenn der Benutzer die Maus nicht mehr bewegt.

Internet Explorer kann bei einem resize des Browserfenstrs in bestimmten Situationen den Browser stilllegen. Weil Internet Explorer das Ereignis kontinuierlich feuert – und zwar nicht nur bei einem resize, sondern auch bei einem body.onresize bzw. document.onresize – kann ein resize die Höhe von Texten durch einen Zeilenumbruch verändern. Das erzeugt dann ein neues resize-Ereignis, so dass Internet Explorer am Ende nur noch mit dem resize beschäftigt ist und hängt.

Attribute

target

Objekt zu dem das Ereignis ursprünglich gesendet wurde

eventPhase

Phase, in der das Ereignis bearbeitet wird: AT_TARGET, BUBBLING_PHASE, CAPTURING_PHASE

bubbles

true, wenn das Ereignis nach oben steigen kann

cancelable

Nein

timeStamp

Zeit in Millisekunden, zu der das Ereignis eingetreten ist

Beispiel: Größe des Browserfensters bei »resize« scannen

• Firefox, Opera, Safari & Co.: Die Größe des Browserfensters lässt sich mit den ursprünglich von Netscape eingebrachten Eigenschaften window.innerWidth und window.innerHeight auslesen.
• IE im Quirksmode (nicht Standard-konform) | In Internet Explorer kann die Größe des Browserfensters mit document.body.clientWidth ausgelesen werden.
• IE (standard-konform) | In Interent Explorer kann die Größe des Browserfensters mit document.documentElement.clientWidth ausgelesen werden.

<div id="bWin"></div>

<script type="text/javascript">
window.onload = function () {
   // initale Breite und Höhe des Browserfensters
   var iWidth = window.innerWidth || 
      (window.document.documentElement.clientWidth || window.document.body.clientWidth);
   var iHeight = window.innerHeight || 
      (window.document.documentElement.clientHeight || window.document.body.clientHeight);

   // in DIV-Element eintragen
   var bWin = document.getElementById('bWin');
   bWin.innerHTML = "Fensterbreite " + iWidth + " Fensterhöhe " + iHeight;

   // Beim Vergrößern oder Verkleinern des Browserfensters
   // die Ausgabe der Werte permanet aktualisieren
   window.onresize = function (evt) {
      var width = window.innerWidth || 
         (window.document.documentElement.clientWidth || window.document.body.clientWidth);
      var height = window.innerHeight || 
         (window.document.documentElement.clientHeight || window.document.body.clientHeight);
      var bWin = document.getElementById('bWin');
      bWin.innerHTML = "Resize Breite " + width + "  <br />Resize Höhe  " + height;
   }
}
</script>