Balise HTML <iframe>

  • Page précédente <i>
  • Page suivante <img>

Définition et utilisation

<iframe> La balise define la frame inline (frame en ligne).

La balise iframe est utilisée pour intégrer un autre document dans le document HTML actuel.

Astuce :Veuillez utiliser CSS pour définir <iframe> le style (voir les exemples ci-dessous).

Astuce :Il est préférable de toujours assigner <iframe> Il contient l'attribut title. Le lecteur d'écran peut utiliser cet attribut pour lire à propos de <iframe> Description du contenu.

Veuillez également consulter :

Tutoriel HTML :HTML Iframe

Manuel de référence HTML DOM :Objet IFrame

Exemple

Exemple 1

La balise iframe est utilisée comme suit :

<iframe src="https://www.codew3c.com" title="CodeW3C.com En Ligne Didacticiel"></iframe>

Essayer personnellement

Exemple 2

Ajouter et supprimer la bordure de l'<iframe> (en utilisant CSS) :

<iframe src="/index.asp" width="100%" height="300" style="border:1px solid black;">
</iframe>
<iframe src="/index.asp" width="100%" height="300" style="border:none;">
</iframe>

Essayer personnellement

Attribut

Attribut Valeur Description
Allow Définir la stratégie de fonction de l'<iframe>.
allowfullscreen
  • True
  • False
 Si l'<iframe> peut activer le mode plein écran en appelant la méthode requestFullscreen(), alors définir sur true.
allowpaymentrequest
  • True
  • False
 Si l'<iframe> permet les appels API Payment Request de cross-origin, alors définir sur true.
Hauteur Pixels Définir la hauteur de l'<iframe>. La hauteur par défaut est de 150 pixels.
Loading
  • Eager
  • Lazy
 Définir si le navigateur doit charger immédiatement l'<iframe> ou retarder le chargement jusqu'à ce que certaines conditions soient remplies.
Name Texte Définir le nom de l'<iframe>.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin-when-cross-origin
  • unsafe-url
 Définir les informations de référence à envoyer lors de l'obtention de l'<iframe>.
sandbox
  • allow-forms
  • allow-pointer-lock
  • allow-popups
  • allow-same-origin
  • allow-scripts
  • allow-top-navigation
 Activer une série de restrictions supplémentaires sur le contenu de l'<iframe>.
Src URL Définir l'adresse du document à intégrer dans l'<iframe>.
Srcdoc Code HTML Définir le contenu HTML de la page à afficher dans l'<iframe>.
Largeur Pixels Définir la largeur de l'<iframe>. La largeur par défaut est de 300 pixels.

Propriétés globales

<iframe> La balise prend également en charge Attributs globaux dans HTML.

Attributs événementiels

<iframe> La balise prend également en charge Attributs événementiels dans HTML.

Configuration CSS par défaut

La plupart des navigateurs utiliseront les valeurs par défaut suivantes pour afficher <iframe> Élément :

iframe:focus {
  outline: none;
}
iframe[seamless] {
  display: block;
}

Compatibilité du navigateur

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support
  • Page précédente <i>
  • Page suivante <img>