<iframe> — HTML element uitgelegd

Attributen

Dit element bevat de globale attributen.

`allow`	Specificeert een Permissions Policy voor de `<iframe>`. Het beleid bepaalt welke functies beschikbaar zijn voor de `<iframe>` (bijvoorbeeld toegang tot de microfoon, camera, batterij, web-share, enz.) op basis van de origin van het verzoek. Zie iframes in het onderwerp `Permissions-Policy` voor voorbeelden. Opmerking Een Permissions Policy die via het `allow`-attribuut wordt opgegeven, implementeert een aanvullende beperking bovenop het beleid dat is opgegeven in de header `Permissions-Policy`. Het vervangt dit beleid niet.
`allowfullscreen`	Ingesteld op `true` als de `<iframe>` de fullscreen-modus mag activeren door de methode `requestFullscreen()` aan te roepen. Opmerking Dit attribuut wordt beschouwd als een legacy-attribuut en is opnieuw gedefinieerd als `allow="fullscreen *"`.
`allowpaymentrequest` Verouderd Niet-standaard	Ingesteld op `true` als een cross-origin `<iframe>` de Payment Request API mag aanroepen. Opmerking Dit attribuut wordt beschouwd als een legacy-attribuut en is opnieuw gedefinieerd als `allow="payment *"`.
`browsingtopics` Niet-standaard Verouderd	Een booleaans attribuut dat, indien aanwezig, aangeeft dat de geselecteerde topics voor de huidige gebruiker moeten worden meegestuurd met het verzoek voor de bron van de `<iframe>`.
`credentialless` Experimenteel	Ingesteld op `true` om de `<iframe>` credentialless te maken, wat betekent dat de inhoud ervan wordt geladen in een nieuwe, tijdelijke context. Deze heeft geen toegang tot het netwerk, de cookies en de opslagdata die aan de origin ervan gekoppeld zijn. Er wordt een nieuwe context gebruikt die lokaal is voor de levensduur van het topniveau-document. Als tegenprestatie kunnen de inbeddingsregels van `Cross-Origin-Embedder-Policy` (COEP) worden opgeheven, zodat documenten met COEP ingesteld documenten van derden kunnen insluiten die dit niet hebben ingesteld. Zie IFrame credentialless voor meer details.
`csp` Experimenteel	Een Content Security Policy die wordt gehandhaafd voor de ingebedde bron. Zie `HTMLIFrameElement.csp` voor details.
`height`	De hoogte van het frame in CSS-pixels. Standaard is `150`.
`loading`	Geeft aan wanneer de browser de iframe moet laden: `eager` : Laad de iframe direct bij het laden van de pagina (dit is de standaardwaarde). `lazy` : Stel het laden van de iframe uit totdat deze een berekende afstand van het visual viewport bereikt, zoals gedefinieerd door de browser. Het doel is om het gebruik van netwerk- en opslagbandbreedte die nodig is om het frame op te halen te vermijden, totdat de browser er redelijk zeker van is dat het nodig zal zijn. Dit verbetert de prestaties en kosten in de meeste typische gebruiksscenario's, met name door het verkorten van de initiële laadtijd van de pagina. Laden wordt alleen uitgesteld wanneer JavaScript is ingeschakeld. Dit is een maatregel tegen tracking, want als een user agent lazy loading zou ondersteunen wanneer scripting is uitgeschakeld, zou het nog steeds mogelijk zijn voor een site om de ongeveer scrollpositie van een gebruiker gedurende een sessie te volgen, door strategisch iframes in de markup van een pagina te plaatsen, zodat een server kan bijhouden hoeveel iframes worden aangevraagd en wanneer.
`name`	Een aanwijsbare naam voor de ingebedde browsing context. Deze kan worden gebruikt in het `target`-attribuut van de elementen `<a>`, `<form>` of `<base>`; het `formtarget`-attribuut van de elementen `<input>` of `<button>`; of de parameter `windowName` in de methode `window.open()`. Daarnaast wordt de naam een eigenschap van de objecten `Window` en `Document`, die een verwijzing bevat naar het ingebedde venster of het element zelf.
`privateToken` Experimenteel	Bevat een tekenreeksrepresentatie van een optie-object dat een private state token-bewerking vertegenwoordigt; dit object heeft dezelfde structuur als de eigenschap `privateToken` van het `RequestInit`-dictionary-type. IFrames die dit attribuut bevatten, kunnen bewerkingen initiëren zoals het uitgeven of inwisselen van tokens wanneer hun ingebedde inhoud wordt geladen.
`referrerpolicy`	Geeft aan welke referrer moet worden verzonden bij het ophalen van de bron van het frame: `no-referrer` : De header `Referer` wordt niet verzonden. `no-referrer-when-downgrade` : De header `Referer` wordt niet verzonden naar origins zonder TLS (HTTPS). `origin` : De verzonden referrer wordt beperkt tot de origin van de verwijzende pagina: het schema, de host en de port. `origin-when-cross-origin` : De referrer die naar andere origins wordt verzonden, wordt beperkt tot het schema, de host en de port. Navigaties binnen dezelfde origin bevatten nog steeds het pad. `same-origin` : Een referrer wordt verzonden voor dezelfde origin, maar cross-origin-verzoeken bevatten geen referrer-informatie. `strict-origin` : Verzendt alleen de origin van het document als referrer wanneer het beveiligingsniveau van het protocol gelijk blijft (HTTPS→HTTPS), maar verzendt deze niet naar een minder veilige bestemming (HTTPS→HTTP). `strict-origin-when-cross-origin` (standaard) : Verzendt een volledige URL bij een verzoek binnen dezelfde origin, verzendt alleen de origin wanneer het beveiligingsniveau van het protocol gelijk blijft (HTTPS→HTTPS), en verzendt geen header naar een minder veilige bestemming (HTTPS→HTTP). `unsafe-url` : De referrer bevat de origin en het pad (maar niet het fragment, wachtwoord of gebruikersnaam). Deze waarde is onveilig, omdat hij origins en paden van TLS-beschermde bronnen lekt naar onveilige origins.
`sandbox`	Bepaalt de beperkingen die worden toegepast op de inhoud die in de `<iframe>` is ingebed. De waarde van het attribuut kan leeg zijn om alle beperkingen toe te passen, of bestaan uit door spaties gescheiden tokens om bepaalde beperkingen op te heffen: `allow-downloads` : Staat het downloaden van bestanden toe via een `<a>`- of `<area>`-element met het download-attribuut, evenals via de navigatie die leidt tot het downloaden van een bestand. Dit werkt ongeacht of de gebruiker op de link heeft geklikt, of dat JS-code het zonder gebruikersinteractie heeft geïnitieerd. `allow-forms` : Staat de pagina toe om formulieren te verzenden. Als dit trefwoord niet wordt gebruikt, wordt een formulier normaal weergegeven, maar het verzenden ervan activeert geen invoervalidatie, verzendt geen data naar een webserver, en sluit geen dialoogvenster. `allow-modals` : Staat de pagina toe modale vensters te openen met `Window.alert()`, `Window.confirm()`, `Window.print()` en `Window.prompt()`, terwijl het openen van een `<dialog>` altijd is toegestaan, ongeacht dit trefwoord. Het staat de pagina ook toe om de gebeurtenis `BeforeUnloadEvent` te ontvangen. `allow-orientation-lock` : Staat de bron toe om de schermoriëntatie te vergrendelen. `allow-pointer-lock` : Staat de pagina toe om de Pointer Lock API te gebruiken. `allow-popups` : Staat pop-ups toe (bijvoorbeeld aangemaakt door `Window.open()` of `target="_blank"`). Als dit trefwoord niet wordt gebruikt, mislukt die functionaliteit stilzwijgend. `allow-popups-to-escape-sandbox` : Staat een gesandboxed document toe om een nieuwe browsing context te openen zonder de sandboxvlaggen daaraan op te leggen. Dit maakt het bijvoorbeeld mogelijk om een advertentie van derden veilig te sandboxen zonder dezelfde beperkingen op te leggen aan de pagina waarnaar de advertentie linkt. Als deze vlag niet is opgenomen, worden een doorverwezen pagina, pop-upvenster of nieuw tabblad onderworpen aan dezelfde sandboxbeperkingen als de oorspronkelijke `<iframe>`. `allow-presentation` : Staat inbedders toe om controle te hebben over of een iframe een presentatiesessie kan starten. `allow-same-origin` : Als dit token niet wordt gebruikt, wordt de bron behandeld alsof deze afkomstig is van een speciale origin die altijd faalt bij het same-origin policy (wat mogelijk toegang tot dataopslag/cookies en sommige JavaScript-API's voorkomt). Opmerking Wanneer `allow-same-origin` aanwezig is, kan een ouder-document met dezelfde origin nog steeds toegang krijgen tot en interactie hebben met de DOM van de iframe, zelfs als `allow-scripts` niet is ingesteld. Het `allow-scripts`-token regelt alleen de scriptuitvoering binnen de ingebedde browsing context en heeft geen invloed op DOM-toegang vanuit de ouder. `allow-scripts` : Staat de pagina toe om scripts uit te voeren (maar niet om pop-upvensters te maken). Als dit trefwoord niet wordt gebruikt, is deze bewerking niet toegestaan. `allow-storage-access-by-user-activation` Experimenteel : Staat een document dat in de `<iframe>` is geladen toe om de `Storage Access API` te gebruiken om toegang te vragen tot niet-gepartitioneerde cookies. `allow-top-navigation` : Staat de bron toe om te navigeren in de browsing context op het hoogste niveau (degene met de naam `_top`). `allow-top-navigation-by-user-activation` : Staat de bron toe om te navigeren in de browsing context op het hoogste niveau, maar alleen als dit door een gebruikersactie is geïnitieerd. `allow-top-navigation-to-custom-protocols` : Staat navigaties toe naar niet-`http`-protocollen die in de browser zijn ingebouwd of geregistreerd door een website. Deze functie wordt ook geactiveerd door het trefwoord `allow-popups` of `allow-top-navigation`. Opmerking Wanneer het ingebedde document dezelfde origin heeft als de insluitende pagina, wordt het gebruik van zowel `allow-scripts` als `allow-same-origin` sterk afgeraden, omdat dit het ingebedde document in staat stelt het `sandbox`-attribuut te verwijderen — waardoor het niet veiliger is dan wanneer het `sandbox`-attribuut helemaal niet wordt gebruikt. Sandboxing is nutteloos als de aanvaller inhoud buiten een gesandboxed `iframe` kan weergeven — bijvoorbeeld als de kijker het frame in een nieuw tabblad opent. Dergelijke inhoud moet ook vanuit een aparte origin worden aangeboden om potentiële schade te beperken. Opmerking Bij het omleiden van de gebruiker, het openen van een pop-upvenster, of het openen van een nieuw tabblad vanuit een ingebedde pagina binnen een `<iframe>` met het `sandbox`-attribuut, is de nieuwe browsing context onderworpen aan dezelfde `sandbox`-beperkingen. Dit kan problemen veroorzaken — bijvoorbeeld als een pagina die is ingebed in een `<iframe>` zonder het attribuut `sandbox="allow-forms"` of `sandbox="allow-popups-to-escape-sandbox"` een nieuwe site in een apart tabblad opent, mislukt formulierverzending in die nieuwe browsing context stilzwijgend.
`src`	De URL van de pagina die moet worden ingebed. Gebruik de waarde `about:blank` om een leeg document in te bedden dat voldoet aan het same-origin policy. Merk ook op dat het programmatisch verwijderen van het src-attribuut van een `<iframe>` (bijvoorbeeld via `Element.removeAttribute()`) ervoor zorgt dat `about:blank` in het frame wordt geladen in Firefox (vanaf versie 65), Chromium-gebaseerde browsers en Safari/iOS. Opmerking De pagina `about:blank` gebruikt de URL van het insluitende document als basis-URL bij het oplossen van relatieve URL's, zoals ankerlinks.
`srcdoc`	Inline HTML om in te bedden, dit overschrijft het `src`-attribuut. De inhoud moet de syntaxis van een volledig HTML-document volgen, wat de doctype-directive, `<html>`- en `<body>`-tags, enz. omvat, hoewel de meeste ervan kunnen worden weggelaten, zodat alleen de body-inhoud overblijft. Dit document heeft `about:srcdoc` als locatie. Als een browser het `srcdoc`-attribuut niet ondersteunt, valt deze terug op de URL in het `src`-attribuut. Opmerking De pagina `about:srcdoc` gebruikt de URL van het insluitende document als basis-URL bij het oplossen van relatieve URL's, zoals ankerlinks.
`width`	De breedte van het frame in CSS-pixels. Standaard is `300`.

Afgekeurde attributen

Deze attributen zijn afgekeurd en worden mogelijk niet meer door alle user agents ondersteund. Je zou ze niet moeten gebruiken in nieuwe inhoud, en zou moeten proberen ze uit bestaande inhoud te verwijderen.

`align` Verouderd	De uitlijning van dit element ten opzichte van de omringende context.
`frameborder` Verouderd	De waarde `1` (de standaardwaarde) tekent een rand rond dit frame. De waarde `0` verwijdert de rand rond dit frame, maar je zou in plaats daarvan de CSS-eigenschap `border` moeten gebruiken om `<iframe>`-randen te bepalen.
`longdesc` Verouderd	Een URL van een lange beschrijving van de inhoud van het frame. Vanwege wijdverspreid misbruik is dit niet nuttig voor non-visuele browsers.
`marginheight` Verouderd	De hoeveelheid ruimte in pixels tussen de inhoud van het frame en de boven- en onderranden ervan.
`marginwidth` Verouderd	De hoeveelheid ruimte in pixels tussen de inhoud van het frame en de linker- en rechterranden ervan.
`scrolling` Verouderd	Geeft aan wanneer de browser een scrollbalk voor het frame moet bieden: `auto` : Alleen wanneer de inhoud van het frame groter is dan de afmetingen ervan. `yes` : Toon altijd een scrollbalk. `no` : Toon nooit een scrollbalk.

Scripting

Inline frames worden, net als <frame>-elementen, opgenomen in de pseudo-array window.frames.

Met het DOM-object HTMLIFrameElement kunnen scripts toegang krijgen tot het window-object van de geframede bron via de eigenschap contentWindow. De eigenschap contentDocument verwijst naar het document binnen de <iframe>, hetzelfde als contentWindow.document.

Vanuit de binnenkant van een frame kan een script een verwijzing naar zijn ouder-venster verkrijgen met window.parent.

Scripttoegang tot de inhoud van een frame is onderworpen aan het same-origin policy. Scripts hebben geen toegang tot de meeste eigenschappen in andere window-objecten als het script vanuit een andere origin is geladen, inclusief scripts binnen een frame die toegang proberen te krijgen tot de ouder van het frame. Cross-origin-communicatie kan worden bereikt met Window.postMessage().

Top-navigatie in cross-origin-frames

Scripts die worden uitgevoerd in een frame met dezelfde origin kunnen toegang krijgen tot de eigenschap Window.top en window.top.location instellen om de pagina op het hoogste niveau om te leiden naar een nieuwe locatie. Dit gedrag wordt "top-navigatie" genoemd.

Een cross-origin-frame mag de pagina op het hoogste niveau alleen omleiden met top als het frame sticky activation heeft. Als top-navigatie wordt geblokkeerd, kunnen browsers ofwel om toestemming van de gebruiker vragen om om te leiden, ofwel de fout in de ontwikkelaarsconsole rapporteren (of beide). Deze beperking door browsers wordt framebusting intervention genoemd. Dit betekent dat een cross-origin-frame de pagina op het hoogste niveau niet onmiddellijk kan omleiden — de gebruiker moet eerder al met het frame hebben geïnteracteerd of toestemming voor omleiding hebben verleend.

Een gesandboxed frame blokkeert alle top-navigatie, tenzij de waarden van het sandbox-attribuut zijn ingesteld op allow-top-navigation of allow-top-navigation-by-user-activation. Merk op dat top-navigatierechten worden overgeërfd, zodat een geneste frame alleen een top-navigatie kan uitvoeren als zijn ouderframes dit ook mogen.

Positionering en schaling

Omdat het een vervangen element is, laat de <iframe> toe dat de positie van het ingebedde document binnen zijn box wordt aangepast met de eigenschap object-position.

Opmerking

De eigenschap object-fit heeft geen effect op <iframe>-elementen.

Gedrag van de gebeurtenissen error en load

De gebeurtenissen error en load die op <iframe>'s worden geactiveerd, zouden kunnen worden gebruikt om de URL-ruimte van de HTTP-servers van het lokale netwerk te onderzoeken. Daarom activeren user agents als beveiligingsmaatregel de error-gebeurtenis niet op <iframe>'s, en wordt de load-gebeurtenis altijd geactiveerd, zelfs als het laden van de inhoud van de <iframe> mislukt.

Responsieve afmeting van <iframe>

Om veiligheids- en privacyredenen tonen <iframe>-elementen standaard geen informatie aan het ouderdocument over de afmetingen van de inhoud in het document dat ze insluiten.

Om responsieve afmeting van <iframe>-elementen op basis van hun inhoud mogelijk te maken, kan de tag <meta name="responsive-embedded-sizing"> worden opgenomen in een ingebed document om dit document te laten deelnemen aan het delen van zijn afmetingsinformatie met het ouderdocument. De CSS-eigenschap frame-sizing kan vervolgens op de <iframe> worden ingesteld, zodat deze dezelfde horizontale of verticale afmeting aanneemt als de werkelijke inhoudsgrootte van het ingebedde document. Dit zorgt ervoor dat de inhoud van de <iframe> naadloos past binnen de insluiter, waarbij onnodige scrollbalken worden vermeden.

Om de <iframe> dynamisch aan te passen naarmate het ingebedde document van layoutgrootte verandert, kun je de methode Window.requestResize() aanroepen vanuit het ingebedde document om een bijgewerkte grootte te rapporteren.

Toegankelijkheid

Mensen die navigeren met hulptechnologie zoals een schermlezer kunnen het title-attribuut op een <iframe> gebruiken om de inhoud ervan te labelen. De waarde van de titel moet de ingebedde inhoud beknopt beschrijven:

HTML

<iframe
  title="Wikipedia page for Avocados"
  src="https://en.wikipedia.org/wiki/Avocado"></iframe>

Zonder deze titel moeten ze naar de <iframe> navigeren om te bepalen wat de ingebedde inhoud is. Deze contextverschuiving kan verwarrend en tijdrovend zijn, vooral bij pagina's met meerdere <iframe>'s en/of als embeds interactieve inhoud bevatten zoals video of audio.

Voorbeelden

Een eenvoudige <iframe>

Dit voorbeeld bedt de pagina op https://example.org in een iframe in. Dit is een veelvoorkomend gebruiksscenario van iframes: het insluiten van inhoud van een andere site. Zo zijn bijvoorbeeld het live-voorbeeld zelf en het probeer het-voorbeeld bovenaan beide <iframe>-embeds van inhoud van een andere andere site.

HTML

<iframe
  src="https://example.org"
  title="iframe Example 1"
  width="400"
  height="300">
</iframe>

Resultaat

Resultaat in de browser

Broncode insluiten in een <iframe>

Dit voorbeeld geeft broncode rechtstreeks weer in een iframe. Dit kan worden gebruikt als techniek om scriptinjectie te voorkomen bij het weergeven van door gebruikers gegenereerde inhoud, in combinatie met het sandbox-attribuut.

Merk op dat bij gebruik van srcdoc alle relatieve URL's in de ingebedde inhoud worden opgelost ten opzichte van de URL van de insluitende pagina. Als je ankerlinks wilt gebruiken die naar plekken in de ingebedde inhoud verwijzen, moet je expliciet about:srcdoc als basis-URL opgeven.

HTML

HTML-NOLINT

<article>
  <footer>Nine minutes ago, <i>jc</i> wrote:</footer>
  <iframe
    sandbox
    srcdoc="<p>There are two ways to use the <code>iframe</code> element:</p>
<ol>
<li><a href=&quot;about:srcdoc#embed_another&quot;>To embed content from another page</a></li>
<li><a href=&quot;about:srcdoc#embed_user&quot;>To embed user-generated content</a></li>
</ol>
<h2 id=&quot;embed_another&quot;>Embedding content from another page</h2>
<p>Use the <code>src</code> attribute to specify the URL of the page to embed:</p>
<pre><code>&amp;lt;iframe src=&quot;https://example.org&quot;&amp;gt;&amp;lt;/iframe&amp;gt;</code></pre>
<h2 id=&quot;embed_user&quot;>Embedding user-generated content</h2>
<p>Use the <code>srcdoc</code> attribute to specify the content to embed. This post is already an example!</p>
"
    width="500"
    height="250"
></iframe>
</article>

Zo schrijf je escape-sequenties bij gebruik van srcdoc:

Schrijf eerst de HTML uit, waarbij je alles escapet wat je normaal ook in een gewoon HTML-document zou escapen (zoals <, >, &, enz.).
< en < vertegenwoordigen exact hetzelfde teken binnen het srcdoc-attribuut. Om er in het HTML-document dus een echte escape-sequentie van te maken, vervang je alle ampersands (&) door &. Zo wordt < bijvoorbeeld &lt;, en wordt & &amp;.
Vervang alle dubbele aanhalingstekens (") door " om te voorkomen dat het srcdoc-attribuut voortijdig wordt afgesloten (als je in plaats daarvan ' gebruikt, moet je ' vervangen door '). Deze stap gebeurt na de vorige, zodat de " die in deze stap wordt gegenereerd niet &quot; wordt.

Resultaat

Technische samenvatting

Inhoudscategorieën	Flow content, phrasing content, embedded content, interactive content, palpable content.
Toegestane inhoud	Geen.
Weglaten van tags	Niet toegestaan, zowel de begin- als de eindtags zijn verplicht.
Toegestane oudertags	Elk element dat embedded content toestaat.
Impliciete ARIA-rol	Geen overeenkomstige rol
Toegestane ARIA-rollen	`application`, `document`, `img`, `none`, `presentation`
DOM-interface	`HTMLIFrameElement`

Het element `<iframe>`

Attributen

Afgekeurde attributen

Scripting

Top-navigatie in cross-origin-frames

Positionering en schaling

Gedrag van de gebeurtenissen error en load

Responsieve afmeting van <iframe>

Toegankelijkheid

Voorbeelden

Een eenvoudige <iframe>

HTML

Resultaat

Broncode insluiten in een <iframe>

HTML

Resultaat

Technische samenvatting

Verwante elementen

Het element <iframe>

Attributen

Afgekeurde attributen

Scripting

Top-navigatie in cross-origin-frames

Positionering en schaling

Gedrag van de gebeurtenissen error en load

Responsieve afmeting van <iframe>

Toegankelijkheid

Voorbeelden

Een eenvoudige <iframe>

HTML

Resultaat

Broncode insluiten in een <iframe>

HTML

Resultaat

Technische samenvatting

Verwante elementen

Het element `<iframe>`