Window: resize event
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Das resize-Ereignis wird ausgelöst, wenn die Dokumentansicht (Fenster) in ihrer Größe verändert wurde.
Dieses Ereignis ist nicht abbrechbar und verteilt sich nicht auf andere Elemente.
In einigen früheren Browsern war es möglich, resize-Ereignishandler auf jedem HTML-Element zu registrieren. Es ist weiterhin möglich, onresize-Attribute zu setzen oder addEventListener() zu verwenden, um einen Handler auf einem beliebigen Element zu setzen. Allerdings werden resize-Ereignisse nur auf dem window-Objekt ausgelöst (d.h. durch document.defaultView zurückgegeben). Nur auf dem window-Objekt registrierte Handler empfangen resize-Ereignisse.
Obwohl das resize-Ereignis heutzutage nur für das Fenster ausgelöst wird, können Sie Änderungsbenachrichtigungen für andere Elemente mittels der ResizeObserver-API erhalten.
Wenn das resize-Ereignis in Ihrer Anwendung zu häufig ausgelöst wird, lesen Sie Optimizing window.onresize, um zu steuern, nach welcher Zeit das Ereignis ausgelöst wird.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("resize", (event) => { })
onresize = (event) => { }
Ereignistyp
Ein generisches Event.
Beispiele
Fenstergrößen-Logger
Das folgende Beispiel informiert über die Fenstergröße bei jeder Größenänderung.
HTML
<p>Resize the browser window to fire the <code>resize</code> event.</p>
<p>Window height: <span id="height"></span></p>
<p>Window width: <span id="width"></span></p>
JavaScript
const heightOutput = document.querySelector("#height");
const widthOutput = document.querySelector("#width");
function reportWindowSize() {
heightOutput.textContent = window.innerHeight;
widthOutput.textContent = window.innerWidth;
}
window.onresize = reportWindowSize;
Ergebnis
Hinweis:
Die Beispielausgabe hier befindet sich in einem <iframe>, daher sind die angegebenen Breiten- und Höhenwerte für das <iframe>, nicht für das Fenster, in dem sich diese Seite befindet. Insbesondere wird es schwierig sein, die Fenstergröße so zu ändern, dass ein Unterschied in der gemeldeten Höhe sichtbar wird.
Der Effekt ist leichter zu erkennen, wenn Sie das Beispiel in einem eigenen Fenster anzeigen.
addEventListener-Äquivalent
Sie können den Ereignishandler mit der Methode addEventListener() einrichten:
window.addEventListener("resize", reportWindowSize);
Spezifikationen
| Spezifikation |
|---|
| CSSOM View Module # eventdef-window-resize |