Intégrer du contenu

L'<iframe> (inline frame) intègre un autre document HTML à l'intérieur de la page actuelle. Utilisations courantes :

• Intégrer des vidéos YouTube ou Vimeo
• Google Maps
• Widgets tiers (formulaires de paiement, widgets de chat)
• Terrains de jeu de code (CodePen, JSFiddle)

Attributs clés

• src — URL du document à intégrer.
• title — Requis pour l'accessibilité. Les lecteurs d'écran utilisent cet attribut pour décrire le contenu de l'iframe.
• width / height — Dimensions du cadre.
• loading="lazy" — Diffère le chargement jusqu'à ce que l'iframe soit proche de la zone visible.
• allowfullscreen — Permet au contenu intégré de passer en plein écran (nécessaire pour les lecteurs vidéo).

Intégrer du contenu tiers représente un risque de sécurité. L'attribut sandbox restreint ce que la page intégrée peut faire :

<iframe src="widget.html" sandbox></iframe>

Avec sandbox seul (sans valeurs), l'iframe :

• Ne peut pas exécuter de JavaScript
• Ne peut pas soumettre de formulaires
• Ne peut pas ouvrir de popups
• Ne peut pas naviguer dans la page parente
• Est traité comme une origine unique (pas d'accès aux cookies)

Tu peux réactiver sélectivement des fonctionnalités :

• sandbox="allow-scripts" — Active JavaScript.
• sandbox="allow-forms" — Active la soumission de formulaires.
• sandbox="allow-same-origin" — Traite l'iframe comme ayant la même origine.
• sandbox="allow-popups" — Autorise window.open et target="_blank".

Attention : Combiner allow-scripts et allow-same-origin supprime essentiellement le sandbox. Évite cela sauf si tu fais entièrement confiance au contenu.

L'attribut allow contrôle les fonctionnalités du navigateur (politique de permissions) :

<iframe src="video.html" allow="camera; microphone; fullscreen"></iframe>

L'attribut srcdoc te permet de fournir du contenu HTML directement, sans charger une URL externe :

<iframe srcdoc="<h1>Bonjour depuis srcdoc !</h1><p>Ceci est du HTML en ligne.</p>"
        sandbox
        title="Démo en ligne">
</iframe>

Ceci est utile pour :

• Des aperçus de code en sandbox
• Le rendu isolé de contenu généré par les utilisateurs
• Éviter une requête réseau supplémentaire

Quand src et srcdoc sont tous deux présents, srcdoc a la priorité.

Avant que HTML5 ne standardise <video>, <audio> et améliore <iframe>, deux éléments étaient utilisés pour l'intégration :

<object>

Un conteneur générique pour du contenu intégré — PDFs, Flash, SVG, voire d'autres pages HTML.

<object data="document.pdf" type="application/pdf" width="600" height="400">
  <p>Ton navigateur ne peut pas afficher les PDFs. <a href="document.pdf">Télécharge-le</a>.</p>
</object>

<embed>

Un élément void (pas de balise fermante) pour du contenu de plugin :

<embed src="animation.swf" type="application/x-shockwave-flash" width="400" height="300">

Aujourd'hui, <object> est principalement utilisé pour intégrer des PDFs. <embed> est rarement nécessaire. Préfère <iframe>, <video> et <audio> pour les cas d'usage modernes.