La balise HTML `iframe`

Découvrez les bases du travail avec le HTMLiframeé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


Plus de tutoriels html: