Evento de cambio de tamaño de la ventana de navegador cruzado usando JavaScript/jQuery
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.