davidjbradshaw / iframe-resizer

Questa libreria permette il ridimensionamento automatico dell’altezza e della larghezza degli iFrames sia dello stesso dominio che di quello trasversale per adattarli al loro contenuto. Fornisce una gamma di caratteristiche per affrontare i problemi più comuni con l’uso di iFrames, questi includono:

• Ridimensionamento di altezza e larghezza dell’iFrame alla dimensione del contenuto.
• Funziona con iFrames multipli e annidati.
• Autenticazione del dominio per iFrames cross domain.
• Fornisce una gamma di metodi di calcolo della dimensione della pagina per supportare layout CSS complessi.
• Rileva i cambiamenti al DOM che possono causare il ridimensionamento della pagina usando MutationObserver.
• Rileva gli eventi che possono causare il ridimensionamento della pagina (Window Resize, CSS Animation and Transition, Orientation Change e Mouse events).
• Messaggio semplificato tra l’iFrame e la pagina ospite tramite postMessage.
• Corregge i collegamenti alle pagine nell’iFrame e supporta i collegamenti tra l’iFrame e la pagina madre.
• Fornisce metodi personalizzati di dimensionamento e scorrimento.
• Espone la posizione del genitore e la dimensione della finestra all’iFrame.
• Fornisce gli eventi onMouseEnter e onMouseLeave per l’iFrame.
• Lavora con ViewerJS per supportare documenti PDF e ODF.
• Supporta IE 11 (la V3 supporta fino a IE8)

Dona

Iframe-resizer è il risultato di molte centinaia di ore di lavoro, se vuoi unirti ad altri nel mostrare supporto per il continuo sviluppo di questo progetto, allora sentiti libero di offrirmi un caffè.

Getting Started

Install

Questo pacchetto può essere installato tramite NPM (npm install iframe-resizer --save).

Usage

Il pacchetto contiene due file JavaScript minimizzati nella cartella js. Il primo (iframeResizer.min.js) è per la pagina che ospita gli iFrames. Può essere chiamato con via JavaScript:

const iframes = iFrameResize( , || );

Il secondo file (iframeResizer.contentWindow.min.js) deve essere inserito nella pagina (o nelle pagine) contenuta nell’iFrame. Questo file è progettato per essere un ospite sul sistema di qualcun altro, quindi non ha dipendenze e non farà nulla finché non sarà attivato da un messaggio dalla pagina che lo contiene.

Impostazione tipica

La configurazione normale è di avere l’iFrame che si ridimensiona quando la finestra del browser cambia dimensione o il contenuto dell’iFrame cambia. Per configurare questo è necessario configurare una delle dimensioni dell’iFrame ad una percentuale e dire alla libreria di aggiornare solo l’altra dimensione. Normalmente imposteresti la larghezza al 100% e faresti scalare l’altezza per adattarla al contenuto.

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

Nota: L’uso di min-width per impostare la larghezza dell’iFrame, aggira un problema in iOS che può impedire all’iFrame di dimensionarsi correttamente.

Se hai problemi, controlla la sezione di risoluzione dei problemi.

Esempio

Per vedere il funzionamento guarda questo esempio e osserva la console.

Documentazione API

IFrame-Resizer fornisce una vasta gamma di opzioni e API sia per la pagina madre che per la pagina iframed.

• API della pagina padre
  • Opzioni
  • Eventi
  • Metodi
• IFramed Pagina API
  • Opzioni
  • Eventi
  • Metodi
• Uso con librerie e framework
  • React
  • Vue
  • Angular
  • Ember
  • jQuery
  • Google Apps Script
• Risoluzione dei problemi
• Aggiornamento dalla versione 3
• Storia della versione

Licenza