Как зафиксировать событие изменения размера окна браузера в JavaScript
Вы можете просто использовать метод addEventListener() для регистрации обработчика событий, который будет прослушивать событие resize — изменения размера окна браузера, например window.addEventListener(‘resize’, . ) .
В следующем примере будет отображаться текущая ширина и высота окна браузера при изменении размера.
Заметка: Измените размер окна браузера, чтобы увидеть, как это работает.
Вам следует избегать использования такого решения, как window.onresize = function(event) < . >; , поскольку оно переопределяет функцию обработчика событий window.onresize . Вам лучше назначить новый обработчик событий изменения размера с помощью прослушивателя событий, как показано в примере выше.
Подробнее см. Руководство по прослушивателям событий JavaScript, чтобы узнать об этом больше.
Читайте также
Похожие примеры:
Window: resize event
The resize event fires when the document view (window) has been resized.
This event is not cancelable and does not bubble.
In some earlier browsers it was possible to register resize event handlers on any HTML element. It is still possible to set onresize attributes or use addEventListener() to set a handler on any element. However, resize events are only fired on the window object (i.e. returned by document.defaultView ). Only handlers registered on the window object will receive resize events.
While the resize event fires only for the window nowadays, you can get resize notifications for other elements using the ResizeObserver API.
If the resize event is triggered too many times for your application, see Optimizing window.onresize to control the time after which the event fires.
Syntax
Use the event name in methods like addEventListener() , or set an event handler property.
addEventListener("resize", (event) => >); onresize = (event) => >;
Event type
Event properties
This interface also inherits properties of its parent, Event . UIEvent.detail Read only Returns a long with details about the event, depending on the event type. UIEvent.sourceCapabilities Experimental Read only Returns an instance of the InputDeviceCapabilities interface, which provides information about the physical device responsible for generating a touch event. UIEvent.view Read only Returns a WindowProxy that contains the view that generated the event. UIEvent.which Deprecated Non-standard Read only Returns the numeric keyCode of the key pressed, or the character code ( charCode ) for an alphanumeric key pressed.
Examples
Window size logger
HTML
p>Resize the browser window to fire the code>resizecode> 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;
Result
addEventListener equivalent
.addEventListener("resize", reportWindowSize);
Specifications
Browser compatibility
Found a content problem with this page?
This page was last modified on Apr 8, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
Событие изменения размера окна в JavaScript
- Добавить событие изменения размера с помощью функции addEventListener() в JavaScript
- Добавить событие изменения размера с помощью функции onresize() в JavaScript
В этом руководстве будет обсуждаться добавление события изменения размера с помощью функций addEventListener() и onresize() в JavaScript.
Добавить событие изменения размера с помощью функции addEventListener() в JavaScript
Чтобы добавить событие изменения размера в окно, мы можем использовать функцию addEventListener() в JavaScript. Эта функция добавляет к объекту событие, содержащее функцию. Например, давайте добавим событие в окно объекта, чтобы получить его ширину и высоту и отобразить его на веб-странице. См. Код ниже.
html> head> title>title> head> body> span>Width = span>span id="SpanID1">span> br /> span>Height = span>span id="SpanID2">span> script type="text/javascript"> start(); window.addEventListener('resize', start); function start() document.getElementById('SpanID1').innerText = document.documentElement.clientWidth; document.getElementById('SpanID2').innerText = document.documentElement.clientHeight; > script> body> html> В приведенном выше коде мы добавили диапазон с текстом Width= , а после этого мы добавили пустой диапазон с идентификатором SpanID1 в раздел body. Мы добавили тег br для перемещения курсора на новую строку, а в новой строке мы добавили еще один диапазон с текстом Height= , а после этого мы добавили еще один пустой диапазон с идентификатором SpanID2 .
Идентификатор диапазона будет использоваться для получения элемента в JavaScript. В теге скрипта у нас есть функция start() , которая используется для изменения текста двух промежутков в зависимости от ширины и высоты окна. После функции start() мы добавили событие изменения размера, которое будет вызывать функцию start() , когда пользователь изменяет размер окна. Ширина и высота окна будут отображаться на странице и будут меняться по мере изменения размера окна. Вы можете сохранить приведенный выше код в HTML-файл, открыть его в любом браузере и изменить его размер, чтобы увидеть, работает ли код или нет. Вы также можете использовать функцию addEventListener() , чтобы добавить событие к любому объекту, например, к флажку.
Добавить событие изменения размера с помощью функции onresize() в JavaScript
Чтобы добавить событие изменения размера в окно, мы можем использовать функцию onresize() в JavaScript. Эта функция используется, чтобы указать, что произойдет, если размер окна изменится. Например, давайте добавим событие в окно объекта, чтобы получить его ширину и высоту и отобразить его на веб-странице. См. Код ниже.
html> head> title>title> head> body> span>Width = span>span id="SpanID1">span> br /> span>Height = span>span id="SpanID2">span> script type="text/javascript"> start(); window.onresize = start; function start() document.getElementById('SpanID1').innerText = document.documentElement.clientWidth; document.getElementById('SpanID2').innerText = document.documentElement.clientHeight; > script> body> html> В приведенном выше коде функция start() будет вызываться при изменении размера окна. Как видите, результат такой же, как и у описанного выше метода.
Hello! I am Ammar Ali, a programmer here to learn from experience, people, and docs, and create interesting and useful programming content. I mostly create content about Python, Matlab, and Microcontrollers like Arduino and PIC.
Сопутствующая статья — JavaScript Event
onresize Event
The onresize event occurs when the browser window has been resized.
Tip: To get the size of an element, use the clientWidth, clientHeight, innerWidth, innerHeight, outerWidth, outerHeight, offsetWidth and/or offsetHeight properties.
Browser Support
Syntax
In JavaScript, using the addEventListener() method:
Technical Details
| Bubbles: | No |
|---|---|
| Cancelable: | No |
| Event type: | UiEvent if generated from a user interface, Event otherwise |
| HTML tags: | |
| DOM Version: | Level 2 Events |
More Examples
Example
Using the addEventListener() method to attach the «resize» event on the window object.
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.