HTML <iframe> Tag
Exemple
Un cadre en ligne se marque comme suit :
<iframe src="https://www.formation-ti.org" title="formation-ti.org Tutoriels Web Gratuits en Ligne"></iframe> Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et Utilisation
Le <iframe> spécifie un cadre en ligne.
Un cadre en ligne est utilisé pour intégrer un autre document dans le document HTML actuel.
Conseil : Utilisez CSS pour styliser le <iframe> (voir l'exemple ci-dessous).
Conseil : Il est recommandé d'inclure toujours un attribut title pour le <iframe> . Cela est utilisé par les lecteurs d'écran pour lire le contenu du <iframe> .
Support des Navigateurs
| Élément | |||||
|---|---|---|---|---|---|
| <iframe> | Oui | Oui | Oui | Oui | Oui |
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| allow | Spécifie une politique de fonctionnalités pour le <iframe> | |
| allowfullscreen | true false | Défini sur true si le <iframe> peut activer le mode plein écran en appelant la méthode requestFullscreen() |
| allowpaymentrequest | true false | Défini sur true si un <iframe> cross-origin doit être autorisé à invoquer l'API Payment Request |
| height | pixels | Spécifie la hauteur d'un <iframe>. La hauteur par défaut est de 150 pixels |
| loading | eager lazy | Spécifie si un navigateur doit charger un iframe immédiatement ou différer le chargement des iframes jusqu'à ce que certaines conditions soient remplies |
| name | texte | Spécifie le nom d'un <iframe> |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url | Spécifie quelles informations de référent envoyer lors de la récupération de l'iframe |
| sandbox | allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation | Active un ensemble supplémentaire de restrictions pour le contenu dans un <iframe> |
| src | URL | Spécifie l'adresse du document à intégrer dans le <iframe> |
| srcdoc | HTML_code | Spécifie le contenu HTML de la page à afficher dans le <iframe> |
| width | pixels | Spécifie la largeur d'un <iframe>. La largeur par défaut est de 300 pixels |
Attributs Globaux
Le <iframe> prend également en charge les Attributs Globaux en HTML .
Attributs d'Événements
Le <iframe> prend également en charge les Attributs d'Événements en HTML .
Plus d'Exemples
Exemple
Ajouter et supprimer des bordures d'iframe (avec CSS) :
<iframe src="/default.asp" width="100%" height="300" style="border:1px solid black;">
</iframe>
<iframe src="/default.asp" width="100%" height="300" style="border:none;">
</iframe> Pages Associées
Tutoriel HTML : HTML Iframes
Référence DOM HTML : Objet IFrame
Paramètres CSS par Défaut
La plupart des navigateurs afficheront l'élément <iframe> avec les valeurs par défaut suivantes :
iframe:focus {
outline: none;
}
iframe[seamless] {
display: block;
}