Balise HTML <iframe>
La balise <iframe> crée un cadre en ligne pour intégrer du contenu tiers (médias, applets, etc.). Bien que le contenu du cadre et de la page web soient indépendants, ils peuvent interagir via JavaScript.
Syntaxe
La balise <iframe> est un élément HTML standard qui nécessite une balise de fermeture.
Exemple de balise HTML <iframe> :
Exemple de la balise HTML <iframe>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe src="https://www.w3docs.com"></iframe>
</body>
</html>Pour définir la taille de l'iframe, utilisez les attributs height et width, ou utilisez CSS. Les valeurs des attributs sont définies en pixels par défaut, mais elles peuvent aussi être en pourcentage.
Exemple de balise HTML <iframe> avec les attributs height et width :
Exemple de la balise HTML <iframe> avec un attribut height
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe src="https://www.w3docs.com" width="80%" height="300"></iframe>
</body>
</html>Les navigateurs modernes n'appliquent pas de bordure par défaut aux iframes. Vous pouvez toujours utiliser la propriété CSS border pour styliser le cadre si nécessaire.
Exemple de balise HTML <iframe> avec la propriété CSS border :
Exemple de la balise HTML <iframe> avec un attribut style
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe src="https://www.w3docs.com" width="80%" height="300" style="border: none"></iframe>
</body>
</html>Le nouvel attribut loading
Il existe un nouvel attribut HTML loading qui permet de reporter le chargement des images et des iframes jusqu'à ce qu'ils soient proches d'être affichés. Pour cette fonctionnalité, le WHATWG a soumis une pull request, et elle fait déjà partie de Chromium (dès la v76).
Les valeurs prises en charge pour l'attribut loading incluent :
"lazy", qui reporte le chargement jusqu'à ce que l'image ou l'iframe atteigne un seuil de distance par rapport à la zone de visualisation (viewport)."eager", qui charge la ressource immédiatement.
Vous pouvez utiliser la valeur lazy pour profiter du chargement différé natif du navigateur :
Balise HTML <iframe>
<iframe src="video-player.html" loading="lazy"></iframe>Le chargement différé (lazy loading) est un ensemble de techniques de développement web et d'applications qui reportent le chargement des ressources d'une page à un moment ultérieur, lorsque ces ressources sont nécessaires, plutôt que de les charger immédiatement. Ces techniques permettent d'améliorer les performances, une meilleure utilisation des ressources de l'appareil et de réduire les coûts associés.
Attributs
| Attribute | Value | Description |
|---|---|---|
| align | left right top bottom middle | Spécifie comment le texte est aligné et enroulé autour du cadre. Non pris en charge en HTML5. |
| allow | string | Spécifie une politique qui autorise ou restreint certaines fonctionnalités dans l'iframe. |
| allowfullscreen | Définit que le cadre peut être ouvert en mode plein écran. | |
| frameborder | 1 0 | Définit si la bordure de l'iframe autour du cadre doit être affichée ou non. Non pris en charge en HTML5. |
| height | pixels | Définit la hauteur du cadre (hauteur par défaut 150px). |
| longdesc | URL | Définit une page contenant une longue description du contenu. Non pris en charge en HTML5. |
| marginheight | pixels | Définit les marges supérieure et inférieure du cadre. Non pris en charge en HTML5. |
| marginwidth | pixels | Définit les marges gauche et droite du cadre. Non pris en charge en HTML5. |
| name | text | Définit le nom du cadre. |
| referrerpolicy | URL | Spécifie les informations de référent à envoyer avec la requête. |
| sandbox | Applique des restrictions supplémentaires au contenu à l'intérieur du cadre. | |
"" – Applique toutes les restrictions.<br>allow-forms – Autorise la soumission de formulaires ou d'une page intégrée.<br>allow-same-origin – Considère le document joint comme un document téléchargé depuis la même source que le document parent.<br>allow-scripts – Active l'exécution de scripts sur une page imbriquée.<br>allow-top-navigation – Autorise le contenu du document joint à accéder aux éléments de niveau supérieur (documents, fenêtres). | ||
| scrolling | yes no auto | Définit si la barre de défilement doit être affichée ou non. Non pris en charge en HTML5. |
| seamless | seamless | Spécifie que le contenu du document joint doit être affiché comme faisant partie du document parent. |
| src | URL | Spécifie l'adresse du document dont le contenu sera chargé dans le cadre. |
| srcdoc | HTML_code | Stocke le contenu du cadre directement dans l'attribut. |
| width | pixels | Définit la largeur du cadre. (largeur par défaut 300px). |
La balise <iframe> prend en charge les attributs globaux et les attributs d'événement.
Pratique
Quels sont les attributs d'une balise HTML iFrame ?