iFrames har vært en del av HTML-standarden lenge. Men i HTML 4.0 ble de pakket sammen med de nå utdaterte rammene inn i rammesett-HTML-varianten. Rammene blir ikke lenger vurdert i HTML5, men de innebygde rammene (iFrames) blir det.
Med iFrames kan andre nettsider bli integrert. Nettleseren gjengir dermed en annen HTML-fil innenfor gjeldende nettside. Innholdet i iFrame-vinduet kan formateres individuelt.
Når vi snakker om iFrames, må sikkerheten ved denne HTML-teknikken selvfølgelig vurderes på nytt. Et problem her er skadelig kode som kan bli infiltrert i nettsider via iFrames uten å bli oppdaget. Dette er selvfølgelig en stor ulempe.
I HTML5 har det imidlertid blitt innført passende sikkerhetsmekanismer for å unngå disse problemene. Mer om dette vil bli diskutert senere i dette opplæringsprogrammet. Før man bruker iFrames, bør man likevel huske at de potensielt utgjør en sikkerhetstrussel, spesielt fordi de nye sikkerhetsattributtene ennå ikke støttes av alle nettlesere.
I HTML5 er iFrames en del av den faste standarden og bringer med seg noen ekstra attributter her. Det følgende eksempelet viser hvordan iFrames kan defineres.
<iframe src="http://www.psd-tutorials.de/" width="420" height="350"> <a href="http://www.psd-tutorials.de/">PSD-Tutorials.de</a> </iframe>
Resultatet i nettleseren ser slik ut:
Det iframe-elementet får tildelt attributtet src. Dette src inneholder som verdi siden som skal vises. Det kan være en lokal fil eller som i det viste eksempelet, en ekstern ressurs som blir kalt opp.
Bredden og høyden til iFrames bestemmes gjennom attributtene width og height. Hvis innholdet som er inkludert er større enn størrelsen som ble angitt for iFrame, vil rullefeltene vises.
Mellom åpnings- og lukke-tags for <iframe> kan vilkårlig innhold defineres. Dette innholdet vil kun være synlig i nettlesere som ikke kjenner til iframe-elementet.
HTML5 introduserer en rekke nye attributter knyttet til iFrames, hovedsakelig relatert til såkalt Sandbox-atferd.
Nettleserne har samme opprinnelsespolicy som sørger for at en inkludert nettside ikke kan manipuleres under visningen. Denne sikkerhetsfunksjonen er absolutt fornuftig, men ikke alltid ideell. Derfor ble sandbox-attributtet introdusert i HTML5, som gir nettleserne beskjed om hvilke tillatelser som skal gis til innholdet som er inkludert fra en ekstern side i en iFrame.
<iframe sandbox="allow-forms" src="getusercontent.cgi?id=12193"> </iframe>
iFrames som er utstyrt med attributtet sandbox har ikke tilgang til DOM-en til den inkluderte nettsiden. I tillegg kan de ikke utføre skripter eller lagre informasjonskapsler. Disse begrensningene kan oppheves ved hjelp av ulike Sandbox-verdier.
Forskjellige verdier kan tildeles til sandbox-attributtet. Ved hjelp av allow-forms kan den inkluderte nettsiden samle inn informasjon fra brukerne via skjemaer. Brukere vil ikke være klar over at skjemaet ikke kommer fra gjeldende side.
Hvis man derimot angir allow-same-origin, vil den inkluderte nettsiden behandles som om den kommer fra samme vert. Dette opphever Same Origin Policy.
Verdien allow-top-navigation tillater den inkluderte nettsiden å endre innholdet til det øverste nettlesingskonteksten.
Og så har vi allow-script. Dette tillater at JavaScript kan være inkludert på den inkluderte nettsiden, som kan manipulere den innebyggende siden.
Her er et eksempel på hvordan en tilsvarende sandbox-instruksjon kunne se ut:
<iframe sandbox="allow-same-origin" src="http://www.psd-tutorials.de/"> </iframe>
Det er også mulig å tildele flere verdier. Disse skal da skilles med mellomrom. Her er et eksempel på det:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://www.psd-tutorials.de/"> </iframe>
iFrames er vanligvis designet for å integrere eksterne innhold, men de kan alternativt også inkludere dem.
<iframe src="http://www.psd-tutorials.de/" width="200" height="150" seamless> </iframe>
Dette attributtet har noen interessante egenskaper. For eksempel vil målrettet i det inkluderte dokumentet bli vist i nettleservinduet der iframe-elementet er definert, med mindre noe annet er spesifisert. (Ved vanlig inkludering vil målrettene iFrame-vinduet bli vist).seamless støttes for øyeblikket bare av Google Canary, altså utviklerutgaven av denne nettleseren.
En annen effekt berører stilarkene. Stilarkene til den inkluderende filen gjelder også for den inkluderte dokumentet. (Ved vanlig inkludering gjelder ikke stilarkene).
Et annet attributt har blitt lagt til. Med srcdoc kan du definere innholdet som skal inkluderes direkte. Se på følgende eksempel:
<iframe sandbox="allow-same-origin allow-forms allow-scripts"
seamless="seamless" srcdoc="
<script>
top.location.href=" http://www.psd-tutorials.de/"
</script>">
</iframe>I dette tilfellet mangler src-attributtet, som vanligvis angir den filen som skal inkluderes.
Innholdet angitt via srcdoc behandles som om det kommer fra en ekstern server. Det er dermed underlagt Same Origin Policy i sin helhet. Dette atferden er interessant spesielt i forbindelse med skriptdefinisjoner. Enhver HTML- og JavaScript-kode er tillatt der. Imidlertid må anførselstegn og ampersand-tegnet representert med de navngitte tegnene " og &.
Forresten kan du også direkte definere en side her og dermed vise ønsket innhold.
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc=" <!DOCTYPE html> <html> <head> <title>PSD-Tutorials.de</title> </head> <body> <p>…</p> </body> </html>"> </iframe>
Dette trenger ikke nødvendigvis å være en komplett HTML-fil. Noe slikt her er selvfølgelig også mulig:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc="<p>PSD-Tutorials.de</p>"> </iframe>
For nettleseren vil det se ut som følger:
Dette er helt vanlig HTML-syntaks, uten skripter osv.
Noen flere notater om attributtene som til nå har blitt brukt for visuell utforming: Ting som scrolling, marginwidth og marginheight er ikke lenger tillatt i HTLM5. Disse attributtene blir erstattet med CSS.
