CSS, HTML und Javascript mit {stil}

window onresize

JS window onresize Zentimetermaß um den Monitor eines Notebooks gewickelt

Javascript onresize ruft einen Event Handler auf, wenn das Browserfenster (window oder body) verkleinert oder vergrößert wird – z.B. um das Webseiten-Layout über die Möglichkeiten von HTML und CSS hinaus an die Größe des Browserfensters anzupassen.

Wie Javascript onabord und onerror war auch onresize ein privates Event von Microsoft für Internet Explorer – war also kein Standard. Aber resize wird heute von allem Browsern zuverlässig unterstützt und ist eine Ergänzung der Media Querys für responsive Webseiten.

resize feuert in allen Browsern außer Internet Explorer nur bei Events auf window oder body. Aber das reicht den responsiven Anwendungen – das Abfangen von eines resize-Events auf anderen Elementen als window oder body ist selten gefragt.

Geräteklassen Eine Reihe von verschiedenen Monitoren: Desktop, Handy, Tablett, Notebook

Zur Anpassung von Bildern haben wir heute Media Queries, die das Bild automatisch an den verfügbaren Platz anpassen

Das resize-Event in Javascript feuert in Internet Explorer, Firefox 9 und Safari kontinuiertlich, in älteren Firefox-Versionen feuerte onresize 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. In den jüngeren Versionen von Firefox tritt dieser Effekt nicht mehr auf.

Das kontinuierliche Feuern des Events bringt je nach Aktion eine ordentliche Last zustande.

resize – Eigenschaften

target
Das 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

Größe des Browserfensters bei resize

  • Firefox, Opera, Safari & Co.: Die Größe des Browserfensters lässt sich mit window.innerWidth und window.innerWidth 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) | AB IE9+ kann die Größe des Browserfensters – wie es sich gehört – mit window.clientHeight ausgelesen werden.
window.addEventListener ('load', function () {
   var width = window.innerWidth;   // Breite beim Laden anzeigen
   var height = window.innerHeight; // Höhe beim Laden anzeigen
	
   var showDim = document.getElementById('showDim');
   showDim.innerHTML = "innerWidth " + width + " innerHeight " + height;
	
   window.onresize = function () {
      width = window.innerWidth;
      height = window.innerHeight;
      showDim.innerHTML = "Resize Breite " + width + " Resize Höhe " + height; 
   }
});

Am Rande: IE9 zeigt beim Laden bereits ein resize-Event?

Das Auslesen von Breite und Höhe des Browserfensters war bis zum Abgang von IE8 immer aufwändig und fehlerlastig durch die unterschiedliche Interpretation der Browser. jQuery $(window).innerWidth bzw. jQuery2 $(window).width war hier solider als window.innerWidth oder window.innerHeight.

Heute sind CSS Media Queries eine zuverlässige und effiziente Alternative, wenn das Layout der Seite beim Verkleinern oder Vergrößern des Browserfensters angepasst wird. Als Pendant zu CSS Media Queries gibt window.matchMedia Auskunft über Breite, Höhe, Orientierung oder Auflösung des Monitors.

onresize und onorientationchange

onresize feuert auch bei einem onorientationchange-Event.

   // Entdeckt, ob das Gerät das orientationchange-Event unterstützt
   // Fallback auf resize, falls nicht
   var supportsOrientationChange = "onorientationchange" in window,
      orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

   window.addEventListener(orientationEvent, function() {
      alert('HOLY ROTATING SCREENS BATMAN:' + window.orientation + " " + screen.width);
   }, false);

Quelle Detect rotation of Android phone in the browser with JavaScript auf Stackoverflow.

Resize auf alten IE-Versionen

Bei älteren Versionen von Internet Explorer (vor IE6, IE7) konnte ein resize in bestimmten Situationen den Browser stilllegen. Weil IE das Ereignis kontinuierlich feuert – und zwar nicht nur bei einem window.resize, sondern auch bei einem body.resize bzw. document.resize – kann resize die Höhe von Texten durch einen Zeilenumbruch verändern. Das erzeugt dann ein neues resize-Ereignis, bis IE am Ende nur noch mit dem resize beschäftigt war und sich aufhing.

onresize 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20