Événement de redimensionnement de la fenêtre de navigateur à l'aide de JavaScript / jQuery

JavaScript prend en charge diverses fonctionnalités pour redimensionner la fenêtre de croisement. À cette fin, JQuery a également des méthodes intégrées pour accomplir la tâche de la fenêtre de redimensionnement. JQuery est une bibliothèque bien structurée et entièrement vedette de JavaScript qui peut exécuter efficacement le code JS.

Dans cet article, deux méthodes sont adaptées pour redimensionner la fenêtre en fonction de JavaScript et JQuery. Dans la première méthode, le addEventListener () La méthode est utilisée pour extraire la largeur ainsi que la hauteur de la fenêtre du navigateur de redimensionnement. Dans la deuxième méthode, le fenêtre.redimensive () La méthode calcule le nombre de fois où le navigateur est redimensionné. La fenêtre du navigateur peut être maximisée ou minimisée en fonction des besoins de l'utilisateur.

Ce message sert les résultats d'apprentissage suivants:

• Méthode 1: redimensionner la fenêtre à l'aide de javascript
• Méthode 2: redimensionner la fenêtre à l'aide de jQuery

Méthode 1: redimensionner la fenêtre à l'aide de javascript

En javascript, le addEventListener la méthode est utilisée en passant le «Redimensionner» valeur. Il renvoie le hauteur de page et largeur de page de la fenêtre en maximisant ou en minimisant la fenêtre. L'événement est déclenché lorsque le navigateur modifie la taille de la fenêtre. De plus, l'utilisateur peut spécifier un élément ou un sélecteur pour invoquer l'événement de rediffusion de la fenêtre. Tous les derniers navigateurs (opéra, chrome, bord, safari, etc.) Soutenez cette méthode.

La syntaxe de la méthode AddeventListener () (w.r.t aux fonctionnalités de redimensionnement de la fenêtre) est fournie ci-dessous:

Syntaxe

fenêtre.addEventListener («redimensi», fonction)

La syntaxe ci-dessus peut être décrite comme

La méthode AddeventListener est liée à la 'redimensionner'propriété du fenêtre. De plus, la fonction sera appelée si le redimensionnement de la fenêtre est détecté.

Exemple

L'exemple de code suivant montre l'utilisation de la méthode de JavaScript AddeventListener ().

Code

Exemple de redimensionnement de la fenêtre

> Largeur de page =>
> Hauteur de la page =>

La description du code ci-dessus est décrite ici:

• Une section est spécifiée avec tag dans les différentes propriétés de style telles que Couleur de l'arrière plan, et largeur sont mentionnés.
• Après cela, le Largeur de page et Hauteur de page de la fenêtre actuelle s'affiche en utilisant le portée classe, qui est utilisée pour représenter le contenu en ligne.
• Le fenêtre.addEventListener () la méthode est déclenchée en passant le redimensionner valeur comme argument.
• De plus, un afficher() la méthode est appelée à l'intérieur Mots clés. La largeur et la hauteur de la fenêtre sont mises à jour dynamiquement en passant des valeurs .hauteur et .largeur. Ces valeurs sont associées aux éléments HTML.

Sortir

La sortie est expliquée ici:

• Un message s'affiche d'abord avec titre Mots clés.
• Initialement, le Largeur de la page et le Hauteur de page de la fenêtre existante est définie sur 567 et 304 Pixels, respectivement.
• Les valeurs de Largeur de page et Hauteur de page sont mis à jour en fonction de la dimension de la fenêtre actuelle.

Méthode 2: redimensionner la fenêtre à l'aide de jQuery

Le fenêtre.redimensive () la méthode de jQuery est utilisée pour extraire le largeur et hauteur du navigateur. Il renvoie les valeurs qui montrent combien de fois la fenêtre a été redimensionnée en la maximisant ou en la minimisant. La syntaxe de la méthode redimensive () est fournie ci-dessous:

Syntaxe

$ (fenêtre).redimensit ();

Le fenêtre l'élément représente que le redimensionner la méthode est appliquée à la fenêtre. Vous pouvez transmettre n'importe quelle fonction comme un argument à la méthode redimensive (). Ce faisant, la fonction est exécutée sur le redimensionnement de la fenêtre.

Exemple

Comprenons le concept en utilisant l'exemple suivant.

Code

Exemple de redimensionner la fenêtre du navigateur.

Redimensionner la fenêtre sur> 0 fois.

Dans ce code:

• Tout d'abord, importez la jQuery dans le Mots clés.
• Après cela, une variable I est initialisée avec la valeur 1.
• Après cela, le document.prêt() La méthode est utilisée pour vérifier si le document est prêt à redimensionner.
• Dans cette méthode, fenêtre.redimensive () La méthode est exécutée qui extrait le contenu de la fenêtre du navigateur en utilisant $ («Span»).texte propriété.

Sortir

La sortie montre l'exécution du code ci-dessus. Il affiche une valeur qui se met à jour dynamiquement avec la taille de l'écran de la fenêtre. Il représente le nombre de fois que la fenêtre redimensionne.

Conclusion

Le addEventListener () Méthode de JavaScript rapporte la hauteur et la largeur de la redimensionnement des fenêtres dynamiquement. Tandis que le fenêtre.redimensive () La méthode de jQuery renvoie le nombre de fois que la fenêtre est maximisée ou minimisé. Vous avez appris deux méthodes différentes pour détecter l'événement de redimensionnement de la fenêtre de navigateur croisé à l'aide de jQuery et JavaScript.