Вы можете просто использовать метод addEventListener() для регистрации обработчика событий, который будет прослушивать событие resize — изменения размера окна браузера, например window.addEventListener('resize', ...).
В следующем примере будет отображаться текущая ширина и высота окна браузера при изменении размера.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Window Resize Event</title>
</head>
<body>
<div id="result"></div>
<script>
// Определяем функции прослушивателя событий
function displayWindowSize(){
// Получаем ширину и высоту окна без полос прокрутки
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
// Отображение результата внутри элемента div
document.getElementById("result").innerHTML = "Width: " + w + ", " + "Height: " + h;
}
// Присоединяем функции прослушивателя событий к событию изменения размера окна
window.addEventListener("resize", displayWindowSize);
// Вызов функции в первый раз
displayWindowSize();
</script>
<p><strong>Заметка:</strong> Измените размер окна браузера, чтобы увидеть, как это работает.</p>
</body>
</html>Вам следует избегать использования такого решения, как window.onresize = function(event) { ... };, поскольку оно переопределяет функцию обработчика событий window.onresize. Вам лучше назначить новый обработчик событий изменения размера с помощью прослушивателя событий, как показано в примере выше.
Подробнее см. Руководство по прослушивателям событий JavaScript, чтобы узнать об этом больше.
