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 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 meisten responsiven Anwendungen – das Abfangen von eines resize-Events auf anderen Elementen als window oder body ist selten gefragt.
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 in Chrome, Firefox, IE11 und Safari kontinuiertlich, in älteren Firefox-Versionen feuerte onresize erst, wenn der Benutzer die Größenänderung beendet. Darum wurden Aktionen in Firefox in sichtbaren Sprüngen erst angepasst, wenn der Benutzer die Maus nicht mehr bewegte. In den jüngeren Versionen von Firefox tritt dieser Effekt nicht mehr auf.
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.
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.
Hier wird die Aktionen beim resize durch einen Delay ausgebremst:
let width = document.getElementById("width"); let hight = document.getElementById("height"); let action = document.getElementById("actions"); let delay = 250; // Delay zwischen den Aufrufen let throttled = false; action = 0; // resize callback function getDimensions() { width.innerHTML = window.innerWidth; hight.innerHTML = window.innerHeight; action += 1; actions.innerHTML = action; } // window.resize event listener window.addEventListener('resize', function() { if (!throttled) { // nur wenn throttled nicht gesetzt ist getDimensions(); // Callback-Aktion throttled = true; // Jetzt wird wieder ausgebremst setTimeout(function() { // Timeout throttled = false; }, delay); } }); getDimensions();
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 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.
resize auf HTML-Elementen
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.
Es war einmal eine kluge junge Ente, die hervorragend sehen konnte und obendrein eine angesehene Mathematikerin war. Durch das lange Studieren bei schlechtem Licht wurden ihre Augen mit den Jahren zusehens schlechter, und eines Tages konnte sie kaum noch ihre eigenen Randnotizen erkennen, nicht einmal ihre Lieblingsformel e = N*te.
Formeln mit MathML konnte sie nur noch erkennen, wenn sie nicht innerhalb von Zeilen standen, sondern zentral mit viel Padding drum herum.
Weil Chrome MathML nicht verstand, konnte sie Publikationen nur noch mit Firefox studieren. Darum bat sie eines Tages ihren Assistenten, ihr einen guten Augenarzt zu suchen.
const myObserver = new ResizeObserver(entries => { entries.forEach(entry => { document.querySelector (".res").innerHTML = "width: " + entry.contentRect.width + "
height: " + entry.contentRect.height; }); }); const someEl = document.querySelector('.ente'); myObserver.observe(someEl);