window onresize

Javascript window onresize

Javascript resize feuert, 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.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Browserfenster verkleinern oder vergrößern

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

resize feuert in allen Browsern nur bei Events auf window oder body. Aber das reichte den meisten responsiven Anwendungen – das Abfangen von eines resize-Events auf anderen Elementen als window oder body ist selten gefragt.

Typen von Monitoren
Geräteklassen: Desktop, Handy, Tablett, Notebook

Zur Anpassung von Bildern haben wir heute Media Queries, die z.B. Bilder automatisch an den verfügbaren Platz anpassen.

Das resize-Event in Javascript feuert kontinuierlich. Bei den hohen Anforderungen an die Performance ist heute der Resize Observer die bessere Alternative, um Größenänderungen von Elementen erkennen. Zur Anwendung kommt das resize-Event z.B. noch während Tests des Layouts, um das korrekte Verhalten bei Breakpoints zu prüfen.

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

resize Performance

Bei aufwändigen Aktionen ist das kontinuierliche Feuern von des resize-Events eine hohe Last für den Browser – z.B. auch wenn das Layout der Seite bei Änderungen an die Fenstergröße angepasst wird.

Da resize mit einer hohen Wiederholrate feuert, kann die Frequenz mit setTimeout oder requestAnimationFrame reduziert werden.

resize
getDimensions() wurde 0 mal aufgerufen
Seite ist px breit und px hoch.

Hier werden die Aktionen beim resize durch einen Delay ausgebremst:

const width = document.getElementById("width");
const height = document.getElementById("height");
const actions = document.getElementById("actions");

const delay = 250;           // Delay zwischen den Aufrufen
let throttled = false;

// window.resize callback
function getDimensions() {
	width.innerHTML = window.innerWidth;
	height.innerHTML = window.innerHeight;
	let action = parseInt(document.querySelector ("#actions").innerHTML);
	actions.innerHTML = action + 1;
}

// window.resize event listener
window.addEventListener('resize', function() {
	if (!throttled) {      // erster Aufruf ist noch nicht ausgebremst
		getDimensions();   // Breite / Höhe auslesen
    
		throttled = true;  // ab jetzt wird die resize-Abfrage ausgebremst
    
		setTimeout(function() {  // timeout, um throttled auszuschalten
			throttled = false;
		}, delay);
	}  
});

getDimensions();

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
   let 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.

resizeObserver

Das resize-Event wirkt nur auf dem window- und document-Objekt, nicht aber auf HTML-Elementen wie div und iframe. Aber neben dem intersectionObserver gibt es ein weiteres Application Interface: resizeObserver.

Das resizeObserver-Objekt ähnelt dem intersectionObserver und ist weniger invasiv als die Abfrage mit dem resize-Event, wenn es darum geht, das Ändern von Breite und Höhe eines Elements abzufangen. Alle modernen Browser, nicht IE11.