davidjbradshaw / iframe-resizer

Esta librería permite redimensionar automáticamente la altura y la anchura de los iFrames del mismo dominio y de dominio cruzado para ajustarse a su contenido. Proporciona una serie de características para hacer frente a los problemas más comunes con el uso de iFrames, estos incluyen:

• El cambio de tamaño de la altura y la anchura del iFrame al tamaño del contenido.
• Trabaja con múltiples y anidados iFrames.
• Autenticación de dominio para iFrames de dominio cruzado.
• Proporciona una gama de métodos de cálculo del tamaño de la página para soportar diseños CSS complejos.
• Detecta los cambios en el DOM que pueden hacer que la página cambie de tamaño utilizando MutationObserver.
• Detecta los eventos que pueden hacer que la página cambie de tamaño (cambio de tamaño de la ventana, animación y transición CSS, cambio de orientación y eventos del ratón).
• Simplifica la mensajería entre el iFrame y la página anfitriona a través de postMessage.
• Asegura los enlaces de la página en el iFrame y soporta los enlaces entre el iFrame y la página padre.
• Proporciona métodos personalizados de tamaño y desplazamiento.
• Expone la posición del padre y el tamaño de la ventana gráfica al iFrame.
• Proporciona eventos onMouseEnter y onMouseLeave para el iFrame.
• Trabaja con ViewerJS para soportar documentos PDF y ODF.
• Soporta IE 11 (V3 soporta hasta IE8)

Donación

Iframe-resizer es el resultado de muchas 100s de horas de trabajo, si quieres unirte a otros para mostrar apoyo al desarrollo continuo de este proyecto, entonces no dudes en invitarme a un café.

Comenzando

Instalar

Este paquete puede ser instalado a través de NPM (npm install iframe-resizer --save).

Uso

El paquete contiene dos archivos JavaScript minificados en la carpeta js. El primero (iframeResizer.min.js) es para la página que alberga los iFrames. Puede ser llamado a través de JavaScript:

const iframes = iFrameResize( , || );

El segundo archivo (iframeResizer.contentWindow.min.js) necesita ser colocado en la(s) página(s) contenida(s) en su iFrame. Este archivo está diseñado para ser un invitado en el sistema de otra persona, por lo que no tiene dependencias y no hará nada hasta que sea activado por un mensaje de la página que lo contiene.

Configuración típica

La configuración normal es que el iFrame cambie de tamaño cuando la ventana del navegador cambia de tamaño o el contenido del iFrame cambia. Para configurar esto hay que configurar una de las dimensiones del iFrame a un porcentaje y decirle a la biblioteca que sólo actualice la otra dimensión. Normalmente, se establece la anchura al 100% y la altura se ajusta al contenido.

<style> iframe { width: 1px; min-width: 100%; }</style><iframe src="http://anotherdomain.com/iframe.html"></iframe><script> iFrameResize({ log: true }, '#myIframe')</script>

Nota: El uso de min-width para establecer la anchura del iFrame, evita un problema en iOS que puede impedir que el iFrame tenga el tamaño correcto.

Si tiene problemas, consulte la sección de solución de problemas.

Ejemplo

Para ver cómo funciona, echa un vistazo a este ejemplo y mira la consola.

Documentación de la API

IFrame-Resizer proporciona una amplia gama de opciones y APIs tanto para la página padre como para la página iframed.

• API de la página principal
  • Opciones
  • Eventos
  • Métodos
• IFramed Página API
  • Opciones
  • Eventos
  • Métodos
• Uso con Bibliotecas y Frameworks
  • React
  • Vue
  • Angular
  • Ember
  • jQuery
  • Google Apps Script
• Solución de problemas
• Actualización desde la versión 3
• Historia de versiones

Licencia