[JS]Redimensionnement iframe

NoSmoking

Par défaut les éléments <iframe> sont dimensionnés à 300 px en largeur et 150 px en hauteur.

Le but est de pouvoir redimensionner dynamiquement une iframe en fonction de son contenu.

Mise en oeuvre

Important : Le redimensionnement s'appliquera uniquement si le document conteneur et le document contenu appartiennent au même domaine.

Le HTML utilisé pour l'iframe : 

<body>
  <h1>Contenu de l'iframe</h1>
  <iframe src="iframe-contenu.html"></iframe>
</body>

Le CSS appliqué à l'iframe : 

iframe {
  display: block;
  border: none;
  width: 90%;       /* à définir et à ajuster */
  margin: auto;
}

L'iframe est uniquement définie en largeur, sa hauteur s'adaptera à la hauteur de son contenu via le script ci-dessous.

Le script est à placer en fin de la page mère, celle contenant l'iframe : 

<script>
/**
 * Gestion dimensionnement en hauteur de l'iframe
 */
const oFrame = document.querySelector("iframe");
// fonction appelée par la page enfant, le document contenu dans l'iframe
function ajusteIframe() {
  resizeIframe.call(oFrame);
}
// fonction de redimensionnement de l'iframe
function resizeIframe() {
  const iframe = this;
  const doc = iframe.contentDocument;
  if (doc && doc.documentElement) {
    iframe.style.height = doc.documentElement.offsetHeight + "px";
  }
}
// appel du redimensionnement une fois le contenu de l'iframe chargé
oFrame.addEventListener("load", resizeIframe);
</script>

Cela n'est cependant pas suffisant, il faut également prévoir le cas du redimensionnement de la page mère, donc éventuellement de la page enfant, et pour cela il faut inclure le script suivant en fin de la page enfant, celle contenue dans l'iframe : 

<script>
/**
 * Sur le resize du document appel de la fonction
 * de redimensionnement de l'iframe conteneur
 */
window.addEventListener("resize", function () {
  const parentIframe = window.parent.frames;
  if (parentIframe && parentIframe.ajusteIframe) {
    parentIframe.ajusteIframe()
  }
});
</script>

Contenu de l'iframe

Début du document inséré.

Fin du document inséré.