Evento de cambio de tamaño de la ventana de navegador cruzado usando JavaScript/jQuery

JavaScript admite varias características para cambiar el tamaño de la ventana del navegador cruzado. Para este propósito, JQuery también tiene métodos incorporados para lograr la tarea de la ventana de cambio de tamaño. JQuery es una biblioteca de JavaScript bien estructurada y completamente destacada que puede ejecutar el código JS de manera efectiva.

En esta publicación, se adaptan dos métodos para cambiar el tamaño de la ventana basada en JavaScript y JQuery. En el primer método, el addEventListener () Se emplea el método para extraer el ancho y la altura de la ventana del navegador de cambio de tamaño. En el segundo método, el ventana.cambiar el tamaño () El método calcula el número de veces que el navegador se redimensiona. La ventana del navegador se puede maximizar o minimizar según las necesidades del usuario.

Esta publicación sirve a los siguientes resultados de aprendizaje:

• Método 1: cambiar el tamaño de la ventana con JavaScript
• Método 2: cambiar el tamaño de la ventana con jQuery

Método 1: cambiar el tamaño de la ventana con JavaScript

En JavaScript, el AddEventListener El método se utiliza pasando el "Cambiar el tamaño" valor. Devuelve el altura de la página y ancho de página de la ventana maximizando o minimizando la ventana. El evento se activa cuando el navegador cambia el tamaño de la ventana. Además, el usuario puede especificar un elemento o selector para invocar el evento de cambio de tamaño de la ventana. Todos los últimos navegadores (ópera, cromo, borde, safari, etc.) Apoye este método.

La sintaxis del método addEventListener () (w.riñonal.t a la funcionalidad de cambio de tamaño de la ventana) se proporciona a continuación:

Sintaxis

ventana.addEventListener ('RESEZE', FUNTIL)

La sintaxis escrita anteriormente se puede describir como

El método AddEventListener está vinculado con el 'cambiar de tamaño'propiedad del ventana. Además, se llamará a la función si se detecta el cambio de tamaño de la ventana.

Ejemplo

El siguiente código de ejemplo muestra el uso del método AddEventListener () de JavaScript ().

Código

Ejemplo de cambiar el tamaño de la ventana

> Ancho de página =>
> Altura de la página =>

La descripción del código anterior se describe aquí:

• Se especifica una sección con Etiqueta en la que diferentes propiedades de estilo como color de fondo, y ancho son mencionados.
• Después de eso, el Ancho de página y Altura de la página de la ventana actual se muestra utilizando el durar clase, que se utiliza para representar contenido en línea.
• El ventana.addEventListener () El método se activa pasando el cambiar de tamaño valor como argumento.
• Además, un mostrar() El método se llama dentro etiquetas. El ancho y la altura de la ventana se actualizan dinámicamente por los valores que pasan .altura y .ancho. Estos valores están asociados con los elementos HTML.

Producción

La salida se explica aquí:

• Un mensaje se muestra primero con título etiquetas.
• Inicialmente, el Ancho de página y el Altura de la página de la ventana existente se establecen en 567 y 304 píxeles, respectivamente.
• Los valores de Ancho de página y Altura de la página se actualizan de acuerdo con la dimensión de la ventana actual.

Método 2: cambiar el tamaño de la ventana con jQuery

El ventana.cambiar el tamaño () El método de jQuery se emplea para extraer el anchura y altura del navegador. Devuelve los valores que muestran cuántas veces la ventana se ha cambiado de tamaño maximizándola. La sintaxis del método RESISE () se proporciona a continuación:

Sintaxis

$ (ventana).cambiar el tamaño ();

El ventana El elemento representa que el cambiar de tamaño El método se está aplicando a la ventana. Puede aprobar cualquier función como argumento al método RESISE (). Al hacerlo, la función se ejecuta en el cambio de tamaño de la ventana.

Ejemplo

Entendamos el concepto usando el siguiente ejemplo.

Código

Ejemplo de la ventana del navegador de cambio de tamaño.

Cambiar el tamaño de la ventana alrededor de> 0 veces.

En este código:

• Primero, importe la jQuery dentro del etiquetas.
• Después de eso, una variable I se inicializa con el valor 1.
• Después de eso, el documento.listo() El método se utiliza para verificar si el documento está listo para cambiar el tamaño.
• En este método, ventana.cambiar el tamaño () Se ejecuta el método que extrae el contenido de la ventana del navegador usando $ ("Span").texto propiedad.

Producción

La salida muestra la ejecución del código anterior. Muestra un valor que se actualiza dinámicamente con el tamaño de la pantalla de la ventana. Representa el número de veces que la ventana cambia de tamaño.

Conclusión

El addEventListener () El método de JavaScript informa la altura y el ancho de cambiar el tamaño de Windows dinámicamente. Mientras que la ventana.cambiar el tamaño () Método de JQuery Devuelve el número de veces que la ventana se maximiza o minimiza. Has aprendido dos métodos diferentes para detectar el evento de cambio de tamaño de la ventana de la ventana cruzada utilizando jQuery y JavaScript.