Zoeken…
parameters
| Attribuut | Details |
|---|---|
name | Hiermee wordt de naam van het element, om te worden gebruikt met een a tag aan de iframe veranderen src . |
width | Stelt de breedte van het element in pixels in. |
height | Stelt de hoogte van het element in pixels in. |
src | Hiermee geeft u de pagina op die in het frame wordt weergegeven. |
srcdoc | Hiermee geeft u de inhoud op die in het frame wordt weergegeven, ervan uitgaande dat de browser dit ondersteunt. De inhoud moet geldige HTML zijn. |
sandbox | Indien ingesteld, wordt de inhoud van het iframe behandeld als zijnde van een unieke oorsprong en worden functies zoals scripts, plug-ins, formulieren en pop-ups uitgeschakeld. Beperkingen kunnen selectief worden versoepeld door een door spaties gescheiden lijst met waarden toe te voegen. Zie de tabel in Opmerkingen voor mogelijke waarden. |
allowfullscreen | Of de inhoud van het iframe requestFullscreen() |
Opmerkingen
Een iframe wordt gebruikt om een ander document in te sluiten in het huidige HTML-document.
U kunt iframes gebruiken voor het weergeven van:
- andere HTML-pagina's op hetzelfde domein;
- andere HTML-pagina's op een ander domein (zie hieronder - Beleid van dezelfde oorsprong);
- PDF-documenten (hoewel IE mogelijk problemen heeft, kan deze SO-vraag helpen);
U MOET een iframe als laatste redmiddel gebruiken, omdat deze problemen heeft met bladwijzers en navigatie, en er zijn altijd betere opties dan een iframe. Deze SO-vraag zou je moeten helpen meer te begrijpen over de ups en downs van iframes.
Beleid van dezelfde oorsprong
Sommige sites kunnen niet worden weergegeven met een iframe, omdat ze een beleid afdwingen met de naam Same-origin policy . Dit betekent dat de site waarop het iframe ligt zich in hetzelfde domein moet bevinden als de site die moet worden weergegeven.
Dit beleid is ook van toepassing op het manipuleren van inhoud die zich binnen een iFrame bevindt. Als het iFrame toegang heeft tot inhoud van een ander domein, kunt u de inhoud binnen een iFrame niet openen of manipuleren.
Het iframe-element op W3C
sandbox kenmerk
Het sandbox kenmerk, indien ingesteld, voegt extra beperkingen toe aan het iframe. Een door spaties gescheiden lijst met tokens kan worden gebruikt om deze beperkingen te versoepelen.
| Waarde | Details |
|---|---|
allow-forms | Hiermee kunnen formulieren worden ingediend. |
allow-pointer-lock | Schakelt de JavaScript-pointer-API in. |
allow-popups | Pop-ups kunnen worden gemaakt met behulp van window.open of <a target="_blank" |
allow-same-origin | Het iframe-document gebruikt zijn echte oorsprong in plaats van dat het een unieke krijgt. Indien gebruikt met allow-scripts het iframe-document alle sandboxing verwijderen als het van dezelfde oorsprong is als het bovenliggende document. |
allow-scripts | Schakelt scripts in. Het iframe-document en het bovenliggende document kunnen mogelijk met elkaar communiceren via de API postMessage() . Indien gebruikt met allow-same-origin het iframe-document alle sandboxing verwijderen als het van dezelfde oorsprong is als het bovenliggende document. |
allow-top-navigation | Hiermee kan de inhoud van het iframe de locatie van het document op het hoogste niveau wijzigen. |
Basisprincipes van een inline frame
De term "IFrame" betekent Inline Frame. Het kan worden gebruikt om een andere pagina in uw pagina op te nemen. Dit levert een klein kader op dat de exacte inhoud van base.html toont.
<iframe src="base.html"></iframe>
De framegrootte instellen
De grootte van het IFrame kan worden gewijzigd met behulp van de kenmerken width en height , waarbij de waarden worden weergegeven in pixels (HTML 4.01 toegestane percentagewaarden, maar HTML 5 staat alleen waarden in CSS-pixels toe).
<iframe src="base.html" width="800" height="600"></iframe>
Ankers gebruiken met IFrames
Normaal gesproken wordt een wijziging van webpagina binnen een Iframe gestart vanuit het Iframe, bijvoorbeeld door op een koppeling in de Ifame te klikken. Het is echter mogelijk om de inhoud van een IFrame van buiten het IFrame te wijzigen. U kunt een anker tag wiens gebruik href attribuut is ingesteld op de gewenste URL en waarvan het target attribuut is ingesteld op het iframe de name attribuut.
<iframe src="webpage.html" name="myIframe"></iframe>
<a href="different_webpage.html" target="myIframe">Change the Iframe content to different_webpage.html</a>
Gebruik van het kenmerk "srcdoc"
Het srcdoc kenmerk kan worden gebruikt (in plaats van het src kenmerk) om de exacte inhoud van het iframe als een geheel HTML-document op te geven. Dit levert een IFrame op met de tekst "IFrames zijn cool!"
<iframe srcdoc="<p>IFrames are cool!</p>"></iframe>
Als de srcdoc kenmerk niet wordt ondersteund door de browser, zal de iFrame in plaats daarvan terug te vallen met behulp van de src attribuut, maar als zowel de src en srcdoc attributen aanwezig zijn en worden ondersteund door de browser zijn, srcdoc voorrang.
<iframe srcdoc="<p>Iframes are cool!</p>" src="base.html"></iframe>
Als in het bovenstaande voorbeeld de browser het kenmerk srcdoc niet ondersteunt, wordt in plaats daarvan de inhoud van de pagina base.html weergegeven.
sandboxing
Het volgende sluit een niet-vertrouwde webpagina in met alle beperkingen ingeschakeld
<iframe sandbox src="http://example.com/"></iframe>
Om de pagina toe te staan scripts uit te voeren en formulieren in te dienen, voegt u allow-scripts en allow-forms aan het sandbox attribute .
<iframe sandbox="allow-scripts allow-forms" src="http://example.com/"></iframe>
Als er niet-vertrouwde inhoud (zoals opmerkingen van gebruikers) op hetzelfde domein als de bovenliggende webpagina staat, kan een iframe worden gebruikt om scripts uit te schakelen en toch het bovenliggende document te laten communiceren met de inhoud ervan met JavaScript.
<iframe sandbox="allow-same-origin allow-top-navigation" src="http://example.com/untrusted/comments/page2">
Het bovenliggende document kan gebeurtenislisteners toevoegen en het formaat van het IFrame aanpassen aan de inhoud. Dit, samen met allow-top-navigation , kan ervoor zorgen dat het sandframe-iframe onderdeel lijkt te zijn van het bovenliggende document.
Deze sandbox is geen vervanging voor het opschonen van input, maar kan worden gebruikt als onderdeel van een diepgaande verdedigingsstrategie .
Houd er ook rekening mee dat deze sandbox kan worden ondermijnd door een aanvaller die een gebruiker overtuigt om de bron van het iframe rechtstreeks te bezoeken. De HTTP-header Content Security Policy kan worden gebruikt om deze aanval te beperken.