iFrame-i so že dolgo del HTML-standarda. V HTML 4.0 so bili vključeni skupaj s zdaj že zastarelimi okvirji v okviru HTML-zbirke. Okvirji niso več upoštevani v HTML5, vdelani okvirji (iFrame-i) pa že.
Z iFrame-i je mogoče vključiti druge spletne strani. Brskalnik torej izriše še eno HTML-datoteko znotraj trenutne spletne strani. Vsebino iFrame-okna je mogoče individualno oblikovati.
Ko govorimo o iFrame-ih, je seveda treba dodatno preučiti varnost te HTML-tehnike. Težavo predstavlja zlonamerna koda, ki se lahko neopaženo vstavi v spletne strani preko iFrame-ov. To je seveda ogromen problem.
V HTML5 pa so zdaj na voljo ustrezni varnostni mehanizmi, s katerimi se te težave lahko zaobišče. Več o tem v nadaljevanju tega vodiča. Pred uporabo iFrame-ov pa je vseeno treba upoštevati, da ti lahko predstavljajo potencialno nevarnost, predvsem zato, ker nove varnostne atribute še zdaleč ne podpirajo vsi brskalniki.
V HTML5 spadajo iFrame-i torej med stalne standarde in prinašajo nekaj dodatnih atributov. Naslednji primer prikazuje, kako se lahko definirajo iFrame-i.
<iframe src="http://www.psd-tutorials.de/" width="420" height="350"> <a href="http://www.psd-tutorials.de/">PSD-Tutorials.de</a> </iframe>
V brskalniku izgleda rezultat takole:
Elementu iframe je dodeljen atribut src. Ta src vsebuje kot vrednost stran, ki naj se prikaže. Lahko gre za lokalno datoteko. Možen pa je tudi – kot v prikazanem primeru – klic zunanjega vira.
Z atributoma width in height se določijo širina in višina iFrame-a. Če je vključena vsebina večja od navedene velikosti iFrame-a, se bodo prikazali drsniki.
Med odpirajočim in zapirajočim <iframe>-znakom je mogoče definirati poljubne vsebine. Te bodo vidne samo v brskalnikih, ki ne poznajo elementa iframe.
V HTML5 so uvedeni nekateri novi atributi za iFrame-e, ki imajo predvsem opravka s t. i. vedenjem o peskovniku (sandbox).
V brskalnikih Same Origin Policy poskrbi, da vključena stran med prikazom ni mogoče manipulirati. Ta varnostna funkcija je vsekakor koristna. Kljub temu pa ni vedno idealna. Zato je bila v HTML5 uvedena lastnost sandbox, prek katere brskalniki eksplicitno obveščajo, kakšne dovoljenja naj se dodelijo vsebini, vključeni iz zunanje strani v iFrame.
<iframe sandbox="allow-forms" src="getusercontent.cgi?id=12193"> </iframe>
iFrame-i, opremljeni z atributom sandbox, nimajo dostopa do DOM vključene strani. Prav tako ne smejo izvajati skriptov in shranjevati piškotkov. Te omejitve se lahko odpravijo s pomočjo različnih vrednosti peskovnika.
Atributu sandbox lahko dodelimo različne vrednosti. S allow-forms lahko vključena stran prek obrazcev pridobi informacije od uporabnika. Pri tem uporabnik ne ve, da obrazec ni s trenutne strani.
Če pa navedemo allow-some-origin, se vključena stran obravnava, kot da izvira iz istega gostitelja. S to vrednostjo se razveljavi Same Origin Policy.
Vrednost allow-top-navigation omogoča vključeni vsebini spreminjanje vsebine najvišjega brskalniškega konteksta.
Nato je tu še allow-script. S tem dovoljuje, da v vključeni strani obstaja JavaScript, ki lahko manipulira vdelano stran.
Tukaj je primer, kako bi lahko izgledala ustrezna navodila o sandbox:
<iframe sandbox="allow-same-origin" src="http://www.psd-tutorials.de/"> </iframe>
Vendar pa je mogoče dodeliti tudi več vrednosti. Te ločimo z presledkom. Poglejmo si primer:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://www.psd-tutorials.de/"> </iframe>
iFrame-i so običajno namenjeni vključevanju zunanjih vsebin. Alternativno pa jih je mogoče tudi vključiti.
<iframe src="http://www.psd-tutorials.de/" width="200" height="150" seamless> </iframe>
Ta atribut ima svoj pomen. Navedeni cilji omemb preiskave vključene datoteke – če ni opredeljenega drugačnega – bodo prikazani v brskalniškem oknu, v katerem je bil definiran element iframe. (Pri običajnem vključevanju bodo cilji omemb – če ni drugače opredeljeno – prikazani v oknu iFrame-a).Seamless podpira trenutno le Googlov Canary, to je razvojna različica tega brskalnika.
Drugi učinek se nanaša na sloge. Slogi vključujoče datoteke veljajo tudi za vključeno datoteko. (Pri običajnem vključevanju slogi ne veljajo).
Nova lastnost je dodana. Z srcdoc lahko direktno definirate vključiti vsebino. Oglejte si primer:
<iframe sandbox="allow-same-origin allow-forms allow-scripts"
seamless="seamless" srcdoc="
<script>
top.location.href=" http://www.psd-tutorials.de/"
</script>">
</iframe>V tem primeru manjka src atribut, preko katerega se sicer navede datoteka, ki se vključi.
Vsebina, navedena preko srcdoc, se obravnava kot da izvira s tujega strežnika. Tako je v celoti podvržena politiki istega izvora. To obnašanje je zanimivo na primer v povezavi s skriptnimi definicijami. V njih je dovoljen poljuben HTML in JavaScript koda. Vendar pa je treba narekovaje in simbol in zamenjati z imenovanimi znaki " oziroma &.
Tukaj lahko mimogrede tudi neposredno določite stran in na ta način izpišete želeno vsebino.
<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>
Pravzaprav ni potrebno, da gre za celotno HTML datoteko. Tudi nekaj takega je seveda mogoče:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc="<p>PSD-Tutorials.de</p>"> </iframe>
V brskalniku to potem izgleda takole:
To je torej povsem običajna HTML sintaksa, brez skriptov itd.
Še nekaj napotkov glede atributov, ki so v preteklosti skrbeli za oblikovanje: Stvari, kot so scrolling, marginwidth in marginheight, v HTML5 niso več dovoljene. Te atribute nadomešča CSS.
