Recherche…
Paramètres
| Attribut | Détails |
|---|---|
name | Définit le nom de l'élément, à utiliser avec a étiquette pour changer de l'iframe src . |
width | Définit la largeur de l'élément en pixels. |
height | Définit la hauteur de l'élément en pixels. |
src | Spécifie la page qui sera affichée dans le cadre. |
srcdoc | Spécifie le contenu qui sera affiché dans le cadre, en supposant que le navigateur le supporte. Le contenu doit être HTML valide. |
sandbox | Une fois défini, le contenu de l'iframe est traité comme étant d'une origine unique et les fonctionnalités, y compris les scripts, les plug-ins, les formulaires et les fenêtres contextuelles, seront désactivées. Les restrictions peuvent être assouplies de manière sélective en ajoutant une liste de valeurs séparées par des espaces. Voir le tableau dans Remarques pour les valeurs possibles. |
allowfullscreen | requestFullscreen() le contenu de l'iframe doit être utilisé avec requestFullscreen() |
Remarques
Un iframe est utilisé pour incorporer un autre document dans le document HTML en cours.
Vous pouvez utiliser les iframes pour afficher:
- autres pages HTML sur le même domaine;
- autres pages HTML sur un autre domaine (voir ci-dessous - Politique de même origine);
- Documents PDF (bien que IE puisse avoir des problèmes, cette question SO peut aider);
Vous devez utiliser un iframe en dernier recours, car il a des problèmes avec la mise en signet et la navigation, et il y a toujours de meilleures options autres qu'un iframe. Cette question devrait vous aider à mieux comprendre les hauts et les bas des iframes.
Politique de même origine
Certains sites ne peuvent pas être affichés en utilisant un iframe, car ils appliquent une stratégie appelée stratégie de même origine . Cela signifie que le site sur lequel se trouve l'iframe doit se trouver sur le même domaine que celui à afficher.
Cette politique s'applique également à la manipulation du contenu qui réside dans un iFrame. Si l'iFrame accède à du contenu provenant d'un autre domaine, vous ne pourrez pas accéder au contenu d'un iFrame ni le manipuler.
L'élément iframe sur W3C
attribut sandbox
L'attribut sandbox , lorsqu'il est défini, ajoute des restrictions supplémentaires à l'iframe. Une liste de jetons séparés par des espaces peut être utilisée pour assouplir ces restrictions.
| Valeur | Détails |
|---|---|
allow-forms | Permet de soumettre des formulaires. |
allow-pointer-lock | Active l'API du pointeur JavaScript. |
allow-popups | Les fenêtres contextuelles peuvent être créées à l'aide de window.open ou de <a target="_blank" |
allow-same-origin | Le document iframe utilise son origine réelle au lieu d'en recevoir une unique. S'il est utilisé avec allow-scripts le document iframe peut supprimer tout sandboxing s'il provient de la même origine que le document parent. |
allow-scripts | Active les scripts. Le document iframe et le document parent peuvent être en mesure de communiquer entre eux à l'aide de l'API postMessage() . S'il est utilisé avec allow-same-origin le document iframe peut supprimer tous les sandboxing de la même origine que le document parent. |
allow-top-navigation | Permet au contenu de l'iframe de modifier l'emplacement du document de niveau supérieur. |
Les bases d'un cadre en ligne
Le terme "IFrame" signifie Inline Frame. Il peut être utilisé pour inclure une autre page dans votre page. Cela donnera un petit cadre qui montre le contenu exact du base.html .
<iframe src="base.html"></iframe>
Définition de la taille du cadre
Le format IFrame peut être redimensionné à l'aide des attributs width et height , où les valeurs sont représentées en pixels (valeurs de pourcentage autorisées pour HTML 4.01, mais HTML 5 n'autorise que les valeurs en pixels CSS).
<iframe src="base.html" width="800" height="600"></iframe>
Utiliser des ancres avec IFrames
Normalement, un changement de page Web dans un Iframe est initié avec l'Iframe, par exemple, en cliquant sur un lien à l'intérieur de Ifame. Cependant, il est possible de modifier le contenu d'un IFrame depuis l'extérieur de IFrame. Vous pouvez utiliser une balise d'ancrage dont l'attribut href est défini sur l'URL souhaitée et dont target attribut target est défini sur l'attribut name l'iframe.
<iframe src="webpage.html" name="myIframe"></iframe>
<a href="different_webpage.html" target="myIframe">Change the Iframe content to different_webpage.html</a>
Utiliser l'attribut "srcdoc"
L'attribut srcdoc peut être utilisé (au lieu de l'attribut src ) pour spécifier le contenu exact de l'iframe en tant que document HTML complet. Cela donnera un IFrame avec le texte "IFrames is cool!"
<iframe srcdoc="<p>IFrames are cool!</p>"></iframe>
Si l'attribut srcdoc n'est pas pris en charge par le navigateur, l'IFrame utilisera plutôt l'attribut src , mais si les attributs src et srcdoc sont présents et pris en charge par le navigateur, srcdoc a priorité.
<iframe srcdoc="<p>Iframes are cool!</p>" src="base.html"></iframe>
Dans l'exemple ci-dessus, si le navigateur ne prend pas en charge l'attribut srcdoc , il affichera plutôt le contenu de la page base.html .
Bac à sable
Ce qui suit incorpore une page Web non fiable avec toutes les restrictions activées
<iframe sandbox src="http://example.com/"></iframe>
Pour permettre à la page d'exécuter des scripts et de soumettre des formulaires, ajoutez allow-scripts et allow-forms à l' sandbox attribute .
<iframe sandbox="allow-scripts allow-forms" src="http://example.com/"></iframe>
S'il existe un contenu non fiable (tel que des commentaires utilisateur) sur le même domaine que la page Web parent, un iframe peut être utilisé pour désactiver les scripts tout en permettant au document parent d'interagir avec son contenu à l'aide de JavaScript.
<iframe sandbox="allow-same-origin allow-top-navigation" src="http://example.com/untrusted/comments/page2">
Le document parent peut ajouter des écouteurs d'événement et redimensionner l'IFrame en fonction de son contenu. Ceci, associé à allow-top-navigation , peut faire en sorte que l'iframe en bac à sable apparaisse comme faisant partie du document parent.
Ce bac à sable ne remplace pas l’injection d’assainissement mais peut être utilisé dans le cadre d’une stratégie de défense en profondeur .
Sachez également que ce sandbox peut être corrompu par un attaquant qui convainc un utilisateur de visiter directement la source de l'iframe. L'en-tête HTTP de la stratégie de sécurité du contenu peut être utilisé pour atténuer cette attaque.