La balise HTML `iframe`

Découvrez les bases du travail avec le HTML`iframe`étiqueter

LeiframeLa balise nous permet d'intégrer du contenu provenant d'autres origines (d'autres sites) dans notre page Web.

Techniquement, une iframe crée un nouveau contexte de navigation imbriqué. Cela signifie que tout ce qui se trouve dans l'iframe n'interfère pas avec la page parente, et vice versa. JavaScript et CSS ne «fuient» pas vers / depuis les iframes.

De nombreux sites utilisent des iframes pour effectuer diverses tâches. Vous connaissez peut-être Codepen, Glitch ou d'autres sites qui vous permettent de coder dans une partie de la page, et vous voyez le résultat dans une boîte. C'est une iframe.

Vous en créez un de cette façon:

<iframe src="page.html"></iframe>

Vous pouvez également charger une URL absolue:

<iframe src="https://site.com/page.html"></iframe>

Vous pouvez définir un ensemble de paramètres de largeur et de hauteur (ou les définir en utilisant CSS) sinon l'iframe utilisera les valeurs par défaut, une boîte de 300x150 pixels:

<iframe src="page.html" width="800" height="400"></iframe>

Srcdoc

LesrcdocL'attribut vous permet de spécifier du HTML intégré à afficher. C'est une alternative àsrc, mais récent et non pris en charge dans Edge 18 et versions antérieures, et dans IE:

<iframe srcdoc="<p>My dog is a good dog</p>"></iframe>

bac à sable

LesandboxL'attribut nous permet de limiter les opérations autorisées dans les iframes.

Si nous l'omettons, tout est permis:

<iframe src="page.html"></iframe>

Si nous le définissons sur «», rien n'est autorisé:

<iframe src="page.html" sandbox=""></iframe>

Nous pouvons sélectionner ce qu'il faut autoriser en ajoutant des options dans lesandboxattribut. Vous pouvez en autoriser plusieurs en ajoutant un espace entre les deux. Voici une liste incomplète des options que vous pouvez utiliser:

allow-forms: autoriser l'envoi de formulaires
allow-modalspermet d'ouvrir les fenêtres modales, y compris l'appelalert()en JavaScript
allow-orientation-lockpermet de verrouiller l'orientation de l'écran
allow-popupsautoriser les fenêtres contextuelles, en utilisantwindow.open()ettarget="_blank"liens
allow-same-origintraiter la ressource en cours de chargement comme la même origine
allow-scriptspermet à l'iframe chargé d'exécuter des scripts (mais pas de créer des fenêtres contextuelles).
allow-top-navigationdonne accès à l'iframe au contexte de navigation de niveau supérieur

Permettre

Actuellement expérimental et uniquement pris en charge par les navigateurs basés sur Chromium, c'est l'avenir du partage de ressources entre la fenêtre parente et l'iframe.

C'est similaire ausandboxattribut, mais nous permet d'autoriser des fonctionnalités spécifiques, notamment:

accelerometerdonne accès à l'interface de l'accéléromètre API Sensors
ambient-light-sensordonne accès à l'interface AmbientLightSensor de l'API Sensors
autoplaypermet de lire automatiquement des fichiers vidéo et audio
camerapermet d'accéder à la caméra depuis leAPI getUserMedia
display-capturepermet d'accéder au contenu de l'écran à l'aide de l'API getDisplayMedia
fullscreenpermet d'accéder au mode plein écran
geolocationpermet d'accéder auAPI de géolocalisation
gyroscopedonne accès à l'interface du gyroscope de l'API Sensors
magnetometerdonne accès à l'interface du magnétomètre API Sensors
microphonedonne accès au microphone de l'appareil à l'aide de l'API getUserMedia
midipermet d'accéder à l'API Web MIDI
paymentdonne accès à l'API de demande de paiement
speakerpermet d'accéder à la lecture audio via les haut-parleurs de l'appareil
usbdonne accès à l'API WebUSB.
vibratedonne accès à l'API Vibration
vrdonne accès à l'API WebVR

Référent

Lors du chargement d'une iframe, le navigateur lui envoie des informations importantes sur la personne qui la charge dans leRefereren-tête (notez le seulr, une faute de frappe avec laquelle nous devons vivre).

The misspelling of referrer originated in the original proposal by computer scientist Phillip Hallam-Baker to incorporate the field into the HTTP specification. The misspelling was set in stone by the time of its incorporation into the Request for Comments standards document RFC 1945

LereferrerpolicyL'attribut nous permet de définir le référent à envoyer à l'iframe lors de son chargement. Le référent est un en-tête HTTP qui permet à la page de savoir qui le charge. Voici les valeurs autorisées:

no-referrer-when-downgradec'est la valeur par défaut, et envoie le référent lorsque la page actuelle est chargée via HTTPS et l'iframe se charge sur le protocole HTTP
no-referrern'envoie pas l'en-tête du référent
originle référent est envoyé et ne contient que l'origine (port, protocole, domaine), pas l'origine + chemin qui est la valeur par défaut
origin-when-cross-originlors du chargement depuis la même origine (port, protocole, domaine) dans l'iframe, le référent est envoyé sous sa forme complète (origine + chemin). Sinon, seule l'origine est envoyée
same-originle référent est envoyé uniquement lors du chargement depuis la même origine (port, protocole, domaine) dans l'iframe
strict-originenvoie l'origine comme référent si la page actuelle est chargée via HTTPS et si l'iframe se charge également sur le protocole HTTPS. N'envoie rien si l'iframe est chargé via HTTP
strict-origin-when-cross-originenvoie l'origine + chemin comme référent lorsque vous travaillez sur la même origine. Envoie l'origine comme référent si la page actuelle est chargée via HTTPS et si l'iframe se charge également sur le protocole HTTPS. N'envoie rien si l'iframe est chargé via HTTP
unsafe-url: envoie l'origine + chemin comme référent même lors du chargement de ressources depuis HTTP et la page actuelle est chargée via HTTPS

Téléchargez mon gratuitManuel HTML