davidjbradshaw / iframe-resizer

Cette bibliothèque permet le redimensionnement automatique de la hauteur et de la largeur des iFrames de même domaine et de domaine croisé pour s’adapter à leur contenu. Elle fournit une gamme de fonctionnalités pour répondre aux problèmes les plus courants liés à l’utilisation des iFrames, notamment :

• Redimensionnement en hauteur et en largeur de l’iFrame à la taille du contenu.
• Fonctionne avec des iFrames multiples et imbriquées.
• Authentification de domaine pour les iFrames interdomaines.
• Fournit une gamme de méthodes de calcul de la taille de la page pour prendre en charge les mises en page CSS complexes.
• Détecte les modifications du DOM qui peuvent entraîner le redimensionnement de la page en utilisant MutationObserver.
• Détecte les événements qui peuvent entraîner le redimensionnement de la page (redimensionnement de la fenêtre, animation et transition CSS, changement d’orientation et événements de la souris).
• Messagerie simplifiée entre l’iFrame et la page hôte via postMessage.
• Correction des liens de page dans l’iFrame et prise en charge des liens entre l’iFrame et la page parent.
• Fournit des méthodes de dimensionnement et de défilement personnalisées.
• Expose la position du parent et la taille du viewport à l’iFrame.
• Fournit les événements onMouseEnter et onMouseLeave pour l’iFrame.
• Travaille avec ViewerJS pour supporter les documents PDF et ODF.
• Supporte IE 11 (V3 supporte jusqu’à IE8)

Donate

Iframe-resizer est le résultat de plusieurs centaines d’heures de travail, si vous souhaitez vous joindre à d’autres pour montrer votre soutien au développement continu de ce projet, alors n’hésitez pas à me payer un café.

Démarrage

Installation

Ce paquet peut être installé via NPM (npm install iframe-resizer --save).

Utilisation

Le paquet contient deux fichiers JavaScript minifiés dans le dossier js. Le premier (iframeResizer.min.js) est destiné à la page hébergeant les iFrames. Il peut être appelé avec via JavaScript:

const iframes = iFrameResize( , || );

Le second fichier (iframeResizer.contentWindow.min.js) doit être placé dans la ou les pages contenues dans votre iFrame. Ce fichier est conçu pour être un invité sur le système de quelqu’un d’autre, il n’a donc pas de dépendances et ne fera rien jusqu’à ce qu’il soit activé par un message de la page qui contient.

Configuration typique

La configuration normale consiste à faire redimensionner l’iFrame lorsque la fenêtre du navigateur change de taille ou que le contenu de l’iFrame change. Pour mettre en place cette configuration, vous devez configurer l’une des dimensions de l’iFrame à un pourcentage et indiquer à la bibliothèque de ne mettre à jour que l’autre dimension. Normalement, vous devriez définir la largeur à 100% et faire en sorte que la hauteur s’adapte au contenu.

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

Note : L’utilisation de min-width pour définir la largeur de l’iFrame, contourne un problème dans iOS qui peut empêcher l’iFrame de se dimensionner correctement.

Si vous avez des problèmes, consultez la section de dépannage.

Exemple

Pour voir cela fonctionner, jetez un coup d’œil à cet exemple et regardez la console.

Documentation API

IFrame-Resizer fournit une gamme étendue d’options et d’API pour la page parente et la page iframée.

• API de la page parentale
  • Options
  • Evénements
  • Méthodes
• API de la page iframée. Page API
  • Options
  • Evénements
  • Méthodes
• Utilisation avec des bibliothèques et des frameworks
  .
  • React
  • Vue
  • Angular
  • Ember
  • jQuery
  • Google Apps Script

  .

• Dépannage
• Mise à niveau de la version 3
• Historique des versions

Licence