Az iFrame-ek már régóta részei az HTML szabványnak. Az HTML 4.0-ban azonban őket a már elavult frame-ekkel együtt a Frameset-HTML verzióba csomagolták. A frame-eket az HTML5 már nem veszi figyelembe, azonban az beágyazott iFrame-ek igen.
Az iFrame-ek segítségével más weboldalak is beilleszthetők. Tehát a böngésző egy további HTML fájlt renderel a jelenlegi weboldal keretein belül. Az iFrame ablak tartalmát egyedileg formázhatjuk.
Ha az iFrame-ekről van szó, akkor természetesen ennek az HTML technikának a biztonságát is különösen figyelembe kell venni. Egy problémát jelent az itt átengedett kártékony kód, ami észrevétlenül beilleszthető weboldalakba az iFrame-eken keresztül. Ez természetesen hatalmas bosszúság.
A HTML5-ben azonban már léteznek megfelelő biztonsági mechanizmusok, amelyekkel ezek a problémák elkerülhetők. Erről többet a tanfolyam további részében lehet olvasni. Az iFrame-ek használata előtt azonban érdemes figyelembe venni, hogy ezek potenciálisan veszélyt jelenthetnek, főleg azért, mert az új biztonsági attribútumokat még nem támogatják az összes böngésző.
A HTML5-ben az iFrame-ek tehát szilárd szabványnak számítanak, és néhány kiegészítő attribútummal rendelkeznek. Az alábbi példa megmutatja, hogy hogyan lehet definiálni az iFrame-eket.
<iframe src="http://www.psd-tutorials.de/" width="420" height="350"> <a href="http://www.psd-tutorials.de/">PSD-Tutorials.de</a> </iframe>
A böngészőben az eredmény így néz ki:
Az iframe elemhez a src attribútum van hozzárendelve. Ennek a src attribútumnak az értéke a megjelenítendő oldalt tartalmazza. Ez lehet egy helyi fájl is. Azonban lehetséges – például a látott példában is – egy külső erőforrás hívása.
Az width és height attribútumok segítségével meghatározható az iFrame szélessége és magassága. Ha a beillesztett tartalom nagyobb, mint az iFrame által megadott méretek, akkor görgetősávok jelennek meg.
Az <iframe> nyitó és záró tag-je közé bármilyen tartalom definiálható. Ezek csak azon böngészőkben láthatók, amelyek nem ismerik fel az iframe elemet.
A HTML5-ben az iFrame-ek vonatkozásában néhány új attribútumot vezettek be, amelyek főleg az úgynevezett "Sandbox" viselkedéssel kapcsolatosak.
A böngészőkben a Same Origin Policy arról gondoskodik, hogy egy beillesztett weboldal megjelenítése közben ne lehessen manipulálni azt. Ez a biztonsági funkció kétségtelenül hasznos. Azonban nem mindig ideális. Ezért az HTML5-ben bevezették a sandbox attribútumot, amely segítségével a böngészőknek kifejezetten lehet közölni, hogy az egy iFrame-be beillesztett külső oldal milyen jogosultságokat kapjon.
<iframe sandbox="allow-forms" src="getusercontent.cgi?id=12193"> </iframe>
A sandbox attribútummal rendelkező iFrame-ek nem férnek hozzá a beágyazott oldal DOM-jához. Emellett nem tudnak scripteket futtatni és cookie-kat tárolni. Ezeket a korlátozásokat különböző "Sandbox" értékekkel lehet feloldani.
A sandbox attribútumnak különböző értékeket lehet hozzárendelni. Az "allow-forms" segítségével a beágyazott oldal űrlapokon keresztül tud információkat kérni a felhasználótól. A felhasználók nem tudják, hogy a űrlap nem az aktuális oldalról származik.
Ha azonban az "allow-same-origin"-t használjuk, a beágyazott oldal úgy kezelendő, mintha ugyanazon hostról származnék. Ezzel az értékkel a Same Origin Policy feloldódik.
A "allow-top-navigation" érték lehetővé teszi a beágyazott tartalom számára az legfelső böngészési környezet tartalmának módosítását.
Emellett ott van az "allow-script" is. Ennek eredményeként a beágyazott oldalon lehet JavaScript kód, amely manipulálhatja a beágyazó oldalt.
Itt egy példa arra, hogy hogyan lehet egy ilyen sandbox utasítást megadni:
<iframe sandbox="allow-same-origin" src="http://www.psd-tutorials.de/"> </iframe>
Ugyanakkor több értéket is hozzárendelhetsz. Ezeket a szóközzel kell elválasztani egymástól. Itt is egy példa:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://www.psd-tutorials.de/"> </iframe>
Az iFrame-ek általában arra vannak kialakítva, hogy a külső tartalmak be legyenek ágyazva. Azonban ezek alternatív módon is beágyazhatók.
<iframe src="http://www.psd-tutorials.de/" width="200" height="150" seamless> </iframe>
Ez az attribútum rendkívül fontos. Szerintek eljárási a beillesztett dokumentumban továbbítására, ha nem lett más meghatározva, akkor a böngészőablakban jelenítik meg azt, ahol a iframe elemet meghatározták. (A szokásos beágyazáskor a hivatkozott célok – ha más nincs meghatározva – az iFrame ablakban jelennek meg).
A seamless jelenleg csak a Google Canary által támogatott, vagyis ennek a böngésző fejlesztői verziójának.
A másik hatás a stíluslapokra vonatkozik. Mert a beágyazó fájl stíluslapjai is vonatkoznak a beillesztett dokumentumra. (A normál beillesztésnél a stíluslap megadások nem vesznek hatást).
<iframe sandbox="allow-same-origin allow-forms allow-scripts"
seamless="seamless" srcdoc="
<script>
top.location.href=" http://www.psd-tutorials.de/"
</script>">
</iframe>Ebben az esetben hiányzik a src attribútum, amely általában az integrálni kívánt fájlt adja meg.
Az srcdoc attribútummal megadott tartalom úgy van kezelve, mintha egy külső szerverről származna. Így teljes mértékben a Same Origin Policy szabályozása alá esik. Érdekes lehet ez a magatartás például a szkript-definíciók vonatkozásában. Bármilyen HTML- és JavaScript kódot lehet használni benne. Az idézőjel és az és-jel a " ill. & nevű karakterekkel kell leírni.
Ebben az esetben egyértelműen meg lehet határozni egy oldalt is, amelyen keresztül az adott tartalom megjeleníthető.
<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>
Ebben az esetben nem szükséges egy teljes HTML fájl. Természetesen a következő példa is lehetséges:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc="<p>PSD-Tutorials.de</p>"> </iframe>
A böngészőben ez így néz ki:
Ez tehát egyszerű HTML szintaxis, szkriptek nélkül.
Néhány megjegyzés a vizuális megjelenést eddig segítő attribútumokról: olyan dolgok, mint a scrolling, marginwidth vagy marginheight, már nem engedélyezettek az HTML5-ben. Ezeket az attribútumokat CSS-sel kell helyettesíteni.
