Zdarzenie rozmiaru rozmiaru okna przez przeglądarkę za pomocą JavaScript/jQuery

JavaScript obsługuje różne funkcje zmiany rozmiaru okna przeglądarki. W tym celu JQuery ma również wbudowane metody wykonania zadania okna rozmiaru. JQuery to dobrze zorganizowana i w pełni przedstawiona biblioteka JavaScript, która może skutecznie wykonać kod JS.

W tym poście dwie metody są dostosowane do zmiany rozmiaru okna na podstawie JavaScript i JQuery. W pierwszej metodzie, addEventListener () Metoda jest stosowana do wyodrębnienia szerokości, a także wysokości okna przeglądarki rozmiaru. W drugiej metodzie, okno.Zmień rozmiar() Metoda oblicza liczbę zmian przeglądarki. Okno przeglądarki można zmaksymalizować lub zminimalizować w zależności od potrzeb użytkownika.

Ten post obsługuje następujące wyniki uczenia się:

• Metoda 1: Zmień rozmiar okna za pomocą JavaScript
• Metoda 2: Zmień rozmiar okna za pomocą JQuery

Metoda 1: Zmień rozmiar okna za pomocą JavaScript

W JavaScript, addEventListener Metoda jest wykorzystywana przez przekazywanie "Zmień rozmiar" wartość. Zwraca Wysokość strony I szerokość strony okna poprzez maksymalizowanie lub minimalizowanie okna. Zdarzenie jest wyzwalane, gdy przeglądarka zmienia rozmiar okna. Ponadto użytkownik może określić element lub selektor w celu wywołania zdarzenia rozmiaru okna. Wszystkie najnowsze przeglądarki (Opera, Chrome, Edge, Safari itp.) Wspieraj tę metodę.

Składnia metody addEventListener () (w.R.T do funkcjonalności rozmiaru okna) znajduje się poniżej:

Składnia

okno.addEventListener („rozmiar”, funkcja)

Wyżej napisaną składnię można opisać jako

Metoda addeventListener jest związana z 'Zmień rozmiar„Własność okno. Ponadto funkcja zostanie wywołana, jeśli zostanie wykryte rozmiar okna.

Przykład

Poniższy przykład kodu pokazuje użycie metody JavaScript addEventListener ().

Kod

Przykład rozmiaru okna

> Szerokość strony =>
> Wysokość strony =>

Opis powyższego kodu jest tutaj opisany:

• Sekcja jest określona za pomocą tag, w którym różne właściwości stylizacji, takie jak kolor tła, I szerokość wspomniano.
• Potem Szerokość strony I Wysokość strony bieżącego okna jest wyświetlane za pomocą Zakres klasa, która służy do reprezentowania zawartości wbudowanej.
• okno.addEventListener () Metoda jest wyzwalana przez przekazywanie Zmień rozmiar wartość jako argument.
• Ponadto wyświetlacz() Metoda jest wywoływana wewnątrz tagi. Szerokość i wysokość okna są dynamicznie aktualizowane przez przekazanie wartości .wysokość I .szerokość. Wartości te są powiązane z elementami HTML.

Wyjście

Wyjście jest tutaj wyjaśnione:

• Wiadomość jest wyświetlana najpierw z nagłówek tagi.
• Początkowo Szerokość strony i Wysokość strony istniejącego okna są ustawione na 567 I 304 odpowiednio piksele.
• Wartości Szerokość strony I Wysokość strony są aktualizowane zgodnie z wymiarem bieżącego okna.

Metoda 2: Zmień rozmiar okna za pomocą JQuery

okno.Zmień rozmiar() Metoda jQuery jest stosowana do wyodrębnienia Szerokość i wysokość przeglądarki. Zwraca wartości, które pokazują, ile razy okno zostało zmienione, maksymalizując lub minimalizując. Składnia metody ReSize () podano poniżej:

Składnia

$ (okno).Zmień rozmiar();

okno element reprezentuje, że Zmień rozmiar Metoda jest stosowana do okna. Możesz przekazać dowolną funkcję jako argument do metody ReSize (). W ten sposób funkcja jest wykonywana w zmianie rozmiaru okna.

Przykład

Zrozumiemy koncepcję przy użyciu następującego przykładu.

Kod

Przykład rozmiaru okna przeglądarki.

Zmień rozmiar okna o> 0 czasy.

W tym kodzie:

• Najpierw zaimportuj jQuery w obrębie tagi.
• Następnie zmienna I jest inicjowana z wartością 1.
• Potem dokument.gotowy() Metoda jest wykorzystywana do sprawdzenia, czy dokument jest gotowy do zmiany rozmiaru.
• W tej metodzie, okno.Zmień rozmiar() Metoda jest wykonywana, która wyodrębnia zawartość okna przeglądarki za pomocą $ („Span”).tekst nieruchomość.

Wyjście

Dane wyjściowe pokazuje wykonanie powyższego kodu. Wyświetla wartość, która dynamicznie aktualizuje rozmiar ekranu okna. Reprezentuje liczbę razy rozmiar okna.

Wniosek

addEventListener () Metoda JavaScript donosi dynamicznie wysokość i szerokość rozmiaru systemu Windows. Podczas okno.Zmień rozmiar() Metoda JQuery zwraca liczbę przypadków maksymalizowania lub minimalizowania okna. Nauczyłeś się dwóch różnych metod wykrywania zdarzenia rozmiaru przeglądarki za pomocą JQuery i JavaScript.