La biblioteca iframe-resizer tiene como objetivo eliminar los puntos débiles del uso de iframes. Cambiará el tamaño de su iframe para que coincida con el tamaño de su contenido y luego monitoreará el iframe para asegurarse de que siempre tenga el tamaño perfecto.
Como los navegadores no proporcionan un método único y consistentemente confiable para calcular el tamaño del contenido, iframe-resizer inspecciona automáticamente su página y selecciona el mejor valor para su contenido cada vez que detecta algún cambio.
Para garantizar un impacto mínimo en su sitio, iframe-resizer está altamente optimizado y utiliza la teoría de conjuntos para garantizar que solo verifique los elementos de la página que afectan el tamaño de sus iframes.
Incluso en las páginas más complejas, iframe-resizer puede detectar cambios tanto en HTML como en CSS, calcular las dimensiones del contenido revisado y actualizar el iframe en menos de un milisegundo.
Admite iframes internos (mismo dominio) y externos (entre dominios) a través de un archivo JS simple que está diseñado para ser un invitado de impacto cero en los sitios que lo alojan.
Además, iframe-resizer proporciona una variedad de funciones API del navegador que faltan, que le permiten integrar de forma segura su contenido de iframe con la página principal.
onMouseEnter
y onMouseLeave
al elemento iframeCuando se combina con Viewer.js, puede incluso cambiar el tamaño de los iframes que contienen documentos PDF y ODF.
Consulte el sitio web de iframe-resizer para obtener guías de configuración y documentación de API. Esto incluye versiones para:
Junto con guías de configuración para:
También hay una API para admitir la creación de componentes personalizados adicionales.
Esta versión de iframe-resizer se ha reescrito ampliamente para utilizar API de navegador modernas, lo que ha permitido un rendimiento significativamente mejor y una mayor precisión en la detección de eventos de cambio de tamaño de contenido.
Con esta versión, se aprovechó la oportunidad para actualizar y simplificar la API. Si viene de una versión anterior, encontrará una Guía de actualización para explicar los cambios.
Para la versión 5, iframe-resizer se divide en dos paquetes principales para simplificar la implementación en diferentes dominios y admitir mejor la agitación de árboles. Estos dos paquetes se pueden instalar desde NPM o descargar como un archivo zip.
El paquete de la página principal configura un iframe para cambiar el tamaño del contenido automáticamente. Hay versiones de este paquete para varias bibliotecas y marcos populares (ver más abajo).
Este paquete debe cargarse en el iframe, donde esperará silenciosamente un mensaje de la página principal antes de inicializarse. Está diseñado para ser un buen invitado en el sitio de otra persona.
Además de los dos paquetes principales, existen versiones del paquete principal para las siguientes plataformas.
Un componente de React para la página principal.
Un componente de Vue para la página principal.
Un contenedor jQuery simple para la página principal.
La API principal para la página principal, utilizada por @iframe-resizer/parent
, además de las versiones del marco y los componentes de la biblioteca.
Copyright © 2013-24 David J. Bradshaw - Con licencia GPL V3