Le code

Pour ce tutoriel, nous aurons besoin de deux fichiers HTML : un fichier parent où nous mettons l’iframe, et un fichier enfant contenant le contenu de l’iframe.

child.html

Notre fichier enfant contiendra un générateur de texte factice simple, où les gens peuvent cliquer sur un bouton pour ajouter un autre paragraphe de texte lorem ipsum.

Comme ce tutoriel concerne l’iframe, et non la fonctionnalité de ce qui s’y trouve, n’hésitez pas à copier et coller ce qui suit dans child.html:

Vous pouvez essayer le code ci-dessus dans ce CodePen:

parent.html

Nous pouvons maintenant insérer notre iframe dans parent.html.

Ajouter le code habituel du boilerplate HTML5, puis insérer ce qui suit entre les balises body:

<iframe src="child.html" style="width:100%;border:none;"></iframe>

Mais ici nous rencontrons notre problème. Parce que nous avons défini overflow: hidden, les boutons et la moitié du premier paragraphe disparaissent.

Et si nous n’avions pas défini overflow: hidden, nous verrions deux barres de défilement, comme dans l’image ci-dessus. Pour résoudre cela, nous devons envoyer des messages post de child.html à la fenêtre parent!

child.html

Donc, de retour dans child.html, nous devons ajouter de nouveaux écouteurs d’événements à la section script.

Nous devons notifier à l’élément parent la hauteur de l’iframe :

• à chaque chargement,
• à chaque fois que la fenêtre est redimensionnée, et
• à chaque fois qu’un bouton est pressé.

Lorsque chacun de ces événements se produit, nous déclencherons une fonction appelée sendPostMessage.

Mettez le code suivant juste avant la balise de fermeture <script>:

Maintenant, créons notre fonction sendPostMessage().

Nous voulons mesurer la hauteur de l’élément avec l’id container. Si (et seulement si) la hauteur change, nous voulons envoyer un message appelé frameHeight à la fenêtre parent, lui notifiant la mise à jour.

Le code suivant devrait aller au-dessus de ce que nous venons d’écrire:

Le deuxième argument de la méthode postMessage représente l’origine cible : le nom d’hôte de la fenêtre parent.

C’est utile pour la sécurité, en s’assurant que le message n’est envoyé qu’à des domaines spécifiques, mais à des fins de développement, nous pouvons définir l’origine cible à '*'. Cela signifie que toute fenêtre parent recevra le message.

En somme, le code de child.html devrait ressembler à ceci:

parent.html

Chargeons parent.html dans le navigateur et ouvrons la console (appuyez sur CTRL+Shift+ J dans Google Chrome).

Chaque fois que nous redimensionnons la fenêtre, nous devrions maintenant voir des valeurs apparaître dans la console. L’étape finale consiste à les utiliser pour définir la hauteur de l’iframe chaque fois qu’une de ces valeurs est envoyée.

Nous devons écouter les événements de message et chaque fois que nous en recevons un, nous devrions l’utiliser pour définir la propriété de hauteur de l’iframe (plus un peu de rembourrage):

En somme, votre fichier parent.html devrait ressembler à ceci:

Si vous avez suivi les étapes correctement, votre iframe va maintenant se redimensionner automatiquement comme si son contenu faisait partie de la fenêtre parente!