iFrame-d on olnud juba pikka aega HTML-standardis. HTML 4.0-s pandi need aga koos vananenud raamidega raamistik-html-variandisse. Raamid (frames) ei arvestata HTML5-s enam, küll aga kaasaskantud raame (iFrames).
iFrame-de kaudu saab teisi veebilehti lisada. Brauser renderdab seega teist HTML-faili praeguse veebilehe sees. iFrame-akna sisu saab individuaalselt vormindada.
Kui juttu tuleb iFramedest, tuleb loomulikult eraldi arutada ka selle HTML-tehnika turvalisust. Probleemi esitab siin pahavara, mis võib märkamatult lisanduda veebilehtedele iFrame-de kaudu. See on mõistagi tohutult tüütu.
HTML5-s on aga vastavad turvamehhanismid, mis võimaldavad neid probleeme vältida. Rohkem sellest õpetuse edasises kulgemises. Enne iFrame-de kasutamist tuleb siiski arvestada, et need võivad potentsiaalselt olla ohtlikud, eriti ka seetõttu, et uusi turvalisusatribuute ei toeta kaugeltki kõik brauserid.
HTML5-s kuuluvad iFramed seega kindlasse standardisse ja toovad siia kaasa mõned lisatribuudid. Järgmine näide näitab, kuidas iFramesid on võimalik määratleda.
<iframe src="http://www.psd-tutorials.de/" width="420" height="350"> <a href="http://www.psd-tutorials.de/">PSD-Tutorials.de</a> </iframe>
Brauseris kuvatakse tulemus järgmiselt:
iframe-elemendile omistatakse src-atribuut. See src sisaldab väärtusena lehte, mida kuvatakse. See võib olla kohalik fail. Võimalik on aga ka väliste ressursside kutsumine, nagu juba näiteks näidatud.
Laiust ja kõrgust määratletakse iFrame-de kahe atribuudi width ja height abil. Kui sisestatud sisu on suurem kui iFrame-de määratletud suurus, kuvatakse kerimisribad.
<iframe>-märgendi avamise ja sulgemise vahel saab määratleda mis tahes sisu. Kuid neid näidatakse ainult nendes brauserites, kes ei tunne iframe-elementi.
HTML5-s tutvustatakse iFramedes mitmeid uusi atribuute, mis on peamiselt seotud nn liivaastiku käitumisega.
Brauserites töötab sama päritolupoliitika, mis tagab, et kaasatud veebilehte selle kuvamise ajal ei saa manipuleerida. See turvafunktsioon on kindlasti mõistlik. Siiski pole see alati ideaalne. Seetõttu võeti HTML5-s kasutusele sandbox-atribuut, mille abil saab brauseritele selgelt öelda, milliseid õigusi tuleks anda välise veebisaidi iFrame-sse kaasatud sisule.
<iframe sandbox="allow-forms" src="getusercontent.cgi?id=12193"> </iframe>
iFramed, mis on märgistatud atribuudiga sandbox, ei pääse ligi iFrame-sse kaasatud veebilehe DOM-ile. Nad ei tohi samuti käivitada skripte ega salvestada küpsiseid. Neid piiranguid saab lahendada erinevate liivaastikuväärtustega.sandbox-atribuudile saab omistada erinevaid väärtusi. allow-forms-iga olevate iFrame-dega saab kaasatud veebileht küsida kasutajalt teavet vormide kaudu. Kasutajad ei tea, et vorm ei pärine praeguselt lehelt.
Kui aga täpsustatakse allow-same-origin, koheldakse iFrame-sse kaasatud veebilehte samamoodi nagu see oleks pärit samast hostist. Selle väärtuse abil tühistatakse sama päritolupoliitika.
Väärtus allow-top-navigation võimaldab kaasatud sisul muuta ülemise sirvimiskonteksti sisu.
Ja siis on veel allow-script. Selle abil võib kaasatud veebilehel olla JavaScript, mis saab manustavat lehte muuta.
Siin on näide sellest, kuidas vastav sandbox-juhis võiks välja näha:
<iframe sandbox="allow-same-origin" src="http://www.psd-tutorials.de/"> </iframe>
Võite omistada ka mitu väärtust. Need tuleb teineteisest eraldada tühikuga. Siin on jällegi näide:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://www.psd-tutorials.de/"> </iframe>
iFramed on tavaliselt mõeldud välise sisu kaasamiseks. Alternatiivina võib neid aga ka inkludeerida.
<iframe src="http://www.psd-tutorials.de/" width="200" height="150" seamless> </iframe>
Sellel atribuudil on kindlasti oma mõju. Seega kuvatakse inkludeeritud dokumendi sihtmärgid - kui pole midagi vastupidist määratletud - selles brauseriaknas, kus on määratletud iframe-element. (Tavalisel kaasamisel kuvatakse sihtmärgid - kui pole midagi vastupidist määratletud - iFrame-aknas).seamless-i toetab praegu ainult Google Canary, selle brauseri arendusversioon.
Teine mõju käib stiililehed. Kuna inkludeeriva faili stiililehed kehtivad ka inkludeeritud dokumendi jaoks. (Tavalisel kaasamisel ei kehti stiililehe määrangud).
Lisandunud on ka üks uus atribuut. Atribuudiga srcdoc saab määratleda otse sisu, mida tuleb kaasata. Vaadake selleks järgmist näidet:
<iframe sandbox="allow-same-origin allow-forms allow-scripts"
seamless="seamless" srcdoc="
<script>
top.location.href=" http://www.psd-tutorials.de/"
</script>">
</iframe>Selles konkreetses juhtumis puudub src-atribuut, mille kaudu tavaliselt määratakse lisatav fail.
Üle srcdoc määratletud sisu käsitletakse nii, nagu see oleks pärit võõrast serverist. Seega allub see täielikult Same Origin Policy'le. Huvitav on see käitumine näiteks skriptide määratlemise kontekstis. Seal on lubatud mis tahes HTML- ja JavaScripti kood. Siiski peavad jutumärgid ja ja-märk olema kirjeldatud nimetatud märkide abil " ja &.
Te võite siin muide otse määratleda lehe ja seeläbi soovitud sisu väljastada.
<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>
See ei pea tingimata olema täielik HTML-fail. Muidugi on võimalik midagi sellist:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc="<p>PSD-Tutorials.de</p>"> </iframe>
Brauseris näeb see välja järgmiselt:
See on täiesti tavaline HTML-süntaks ilma skriptideta jne.
Mõned märkused veel atribuutide kohta, mis seni on visuaalse kujunduse jaoks olnud: selliseid asju nagu scrolling, marginwidth ja marginheight HTML5-s enam ei toeta. Need atribuudid asendatakse CSS-iga.
