HTML Iframe est utilisé pour afficher une page Web imbriquée (une page Web dans une page Web). Le HTML
Une iframe HTML intègre un autre document dans le document HTML actuel dans la région rectangulaire.
Le contenu de la page Web et le contenu de l'iframe peuvent interagir les uns avec les autres à l'aide de JavaScript.
interface vs classe abstraite
Syntaxe Iframe
Une iframe HTML est définie avec le
<iframe src="URL"></iframe>
Ici, l'attribut 'src' spécifie l'adresse Web (URL) de la page du cadre en ligne.
Définir la largeur et la hauteur de l'iframe
Vous pouvez définir la largeur et la hauteur de l'iframe en utilisant les attributs « largeur » et « hauteur ». Par défaut, les valeurs des attributs sont spécifiées en pixels mais vous pouvez également les définir en pourcentage. c'est-à-dire 50 %, 60 %, etc.
Exemple : (Pixels)
<h2>HTML Iframes example</h2> <p>Use the height and width attributes to specify the size of the iframe:</p> <iframe src="https://www.javatpoint.com/"></iframe>Testez-le maintenant
Exemple : (Pourcentage)
<h2>HTML Iframes</h2> <p>You can use the height and width attributes to specify the size of the iframe:</p> <iframe src="https://www.javatpoint.com/"></iframe>Testez-le maintenant
Vous pouvez également utiliser CSS pour définir la hauteur et la largeur de l'iframe.
Exemple:
<h2>HTML Iframes</h2> <p>Use the CSS height and width properties to specify the size of the iframe:</p> <iframe src="https://www.javatpoint.com/"></iframe>Testez-le maintenant
Supprimer la bordure de l'iframe
Par défaut, une iframe contient une bordure autour d'elle. Vous pouvez supprimer la bordure en utilisant l'attribut et la propriété CSS border.
polices pour gimp
Exemple:
<h2>Remove the Iframe Border</h2> <p>This iframe example doesn't have any border</p> <iframe src="https://www.javatpoint.com/"></iframe>Testez-le maintenant
Vous pouvez également modifier la taille, la couleur et le style de la bordure de l'iframe.
Exemple:
<h2>Custom Iframe Border</h2> <iframe src="https://www.javatpoint.com/"></iframe>Testez-le maintenant
Cible Iframe pour un lien
Vous pouvez définir un cadre cible pour un lien en utilisant iframe. L'attribut cible du lien que vous avez spécifié doit faire référence à l'attribut name de l'iframe.
Exemple:
<h2>Iframe - Target for a Link</h2> <iframe src="new.html" name="iframe_a"></iframe> <p> <a href="https://www.javatpoint.com">JavaTpoint.com</a> </p> <p>The name of iframe and link target must have same value else link will not open as a frame. </p>Testez-le maintenant
Sortir
nouveau code de sortie.hmtl :
p{ font-size: 50px; color: red;} <p>This is a link below the ifarme click on link to open new iframe. </p> Intégrer une vidéo YouTube à l'aide d'iframe
Vous pouvez également ajouter une vidéo YouTube sur votre page Web en utilisant le
Voici quelques étapes pour ajouter une vidéo YouTube sur votre page Web :
- Accédez à la vidéo YouTube que vous souhaitez intégrer.
- Cliquez sur PARTAGER ➦ sous la vidéo.
- Cliquez sur l'option Intégrer.
- Copiez le code HTML.
- Collez le code dans votre fichier HTML
- Modifiez la hauteur, la largeur et d’autres propriétés (selon les besoins).
Exemple:
<iframe src="https://www.youtube.com/embed/JHq3pL4cdy4" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <iframe src="https://www.youtube.com/embed/O5hShUO6wxs" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">></iframe>Testez-le maintenant
Sortir:
tostring java
Attributs de
| Nom d'attribut | Valeur | Description |
|---|---|---|
| autoriser le plein écran | Si c'est vrai, ce cadre peut être ouvert en plein écran. | |
| hauteur | Pixels | Il définit la hauteur de l'iframe intégré et la hauteur par défaut est de 150 px. |
| nom | texte | Il donne le nom à l'iframe. L'attribut name est important si vous souhaitez créer un lien dans un seul cadre. |
| bordure de cadre | 1 ou 0 | Il définit si l'iframe doit avoir une bordure ou non. (Non pris en charge en HTML5). |
| Largeur | Pixels | Il définit la largeur du cadre intégré et la largeur par défaut est de 300 px. |
| src | URL | L'attribut src est utilisé pour donner le nom du chemin ou le nom du fichier quel contenu doit être chargé dans l'iframe. |
| bac à sable | ||
| Cet attribut est utilisé pour appliquer des restrictions supplémentaires sur le contenu du cadre | ||
| formulaires d'autorisation | Il permet la soumission du formulaire si ce mot-clé n'est pas utilisé alors la soumission du formulaire est bloquée. | |
| autoriser les popups | Cela activera les fenêtres contextuelles, et si elles ne sont pas appliquées, aucune fenêtre contextuelle ne s'ouvrira. | |
| autoriser les scripts | Cela permettra au script de s'exécuter. | |
| autoriser la même origine | Si ce mot-clé est utilisé, la ressource intégrée sera traitée comme téléchargée à partir de la même source. | |
| srcdoc | L'attribut srcdoc est utilisé pour afficher le contenu HTML dans l'iframe en ligne. Il remplace l'attribut src (si un navigateur le prend en charge). | |
| défilement | ||
| Cela indique que le navigateur doit fournir ou non une barre de défilement pour l'iframe. (Non pris en charge en HTML5) | ||
| auto | La barre de défilement ne s'affiche que si le contenu de l'iframe est plus grand que ses dimensions. | |
| Oui | Affiche toujours la barre de défilement pour l'iframe. | |
| Non | N'affiche jamais la barre de défilement pour l'iframe. |