Событие изменения размера окна в разных браузерах с использованием JavaScript / jQuery

Опубликовано: 2 Декабря, 2021

Метод resize () - это встроенный в jQuery метод, который используется, когда окно браузера меняет свой размер. Метод resize () запускает событие изменения размера или присоединяет функцию для запуска при возникновении события изменения размера. jQuery имеет встроенный метод для событий изменения размера окна.

Синтаксис:

 $ (селектор) .resize (функция)

Этот синтаксис используется для кросс-браузерных событий изменения размера.

Пример 1. В этом примере используется метод resize () для подсчета того, сколько раз изменяется размер окна браузера.

 <!DOCTYPE html>
 < html >
 
< head >
    < script src =
 " https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js " >
  </ script >
    < script >
        var x = 1;
        $(document).ready(function() {
            $(window).resize(function() {
                $("span").text(x += 1);
            });
        });
    </ script >
 </ head >
 
< body >
 
    < p >Window resized < span >0</ span > times.</ p >
    < p >Try resizing your browser window.</ p >
 
</ body >
 
</ html > 

Выход:

Перед изменением размера окон браузера:
После изменения размера окон браузера:

Вы можете использовать метод addEventListener (), чтобы зарегистрировать обработчик событий для прослушивания события изменения размера окна браузера, например window.addEventListener ('resize',…).

Синтаксис:

 object.addEventListner ("изменение размера", myscript);

Пример 2: В этом примере отображается размер окон изменения размера.

 <!DOCTYPE html>
 < html lang = "en" >
 
< head >
    < meta charset = "utf-8" >
    < title >JavaScript Window Resize Event</ title >
 </ head >
 
< body >
    < div id = "result" ></ div >
 
    < script >
     
        // Defining event listener function
        function displayWindowSize() {
             
            // Get width and height of the window
            // excluding scrollbars
            var w = document.documentElement.clientWidth;
            var h = document.documentElement.clientHeight;
 
            // Display result inside a div element
            document.getElementById("result").innerHTML
                  = "Width: " + w + ", " + "Height: " + h;
        }
 
        // Attaching the event listener function
        // to window's resize event
        window.addEventListener("resize", displayWindowSize);
 
        // Calling the function for the first time
        displayWindowSize();
    </ script >
     
    < p >
        < strong >Note:</ strong > Please resize the browser
        window to see how it works.
    </ p >
 </ body >
 
</ html > 

Выход:

Перед изменением размера окна браузера:
После изменения размера окна браузера:

Technical Scripter JavaScript Вопросы о Web технологиях JQuery Picked JavaScript-Misc

Событие изменения размера окна в разных браузерах с использованием JavaScript / jQuery

РЕКОМЕНДУЕМЫЕ СТАТЬИ