iFrames jsou již dlouho součástí standardu HTML. V HTML 4.0 byly však spolu s nyní zastaralými rámy zahrnuty do rámcové varianty HTML. Rámy nejsou v HTML5 již zohledněny, vložené rámce (iFrames) však ano.
Pomocí iFrames lze vestavit jiné webové stránky. Prohlížeč tedy vykresluje další HTML soubor uvnitř aktuální webové stránky. Obsah okna iFrame lze individuálně formátovat.
Při zmínce o iFramech je samozřejmě třeba znovu zvážit bezpečnost této HTML techniky. Problémem zde je škodlivý kód, který může být nezjištěně vložen na webové stránky přes iFrame. To je samozřejmě obrovské trápení.
V HTML5 jsou však nyní příslušné bezpečnostní mechanismy, pomocí nichž lze tyto problémy obejít. Více o tomto bude v dalším průběhu tohoto tutoriálu. Před použitím iFrame je však třeba si uvědomit, že mohou představovat potenciální nebezpečí, zejména proto, že nové bezpečnostní atributy zdaleka nejsou podporovány všemi prohlížeči.
V HTML5 jsou tedy iFrames součástí pevného standardu a přinášejí několik dalších atributů. Následující příklad ukazuje, jak lze iFramey definovat.
<iframe src="http://www.psd-tutorials.de/" width="420" height="350"> <a href="http://www.psd-tutorials.de/">PSD-Tutorials.de</a> </iframe>
V prohlížeči vypadá výsledek následovně:
Prvku iframe je přidělen atribut src. Toto src obsahuje jako hodnotu stránku, která má být zobrazena. Může se jednat o lokální soubor. Možné je však také - jako v uvedeném příkladu - volání externího zdroje.
Pomocí obou atributů width a height jsou stanoveny šířka a výška iFramu. Pokud je zahrnut obsah větší než zadaná velikost iFramu, zobrazí se posuvníky.
Mezi zahájením a ukončením značky <iframe> lze definovat libovolný obsah. Tento obsah je však viditelný pouze v prohlížečích, které prvek iframe neznají.
V rámci HTML5 jsou zaváděny některé nové atributy týkající se iFramů, které mají především co do činění se tzv. chováním pískovce (sandbox).
V prohlížečích zajišťuje politika stejného původu (Same Origin Policy), že vestavená webová stránka během svého zobrazení nemůže být manipulována. Tato bezpečnostní funkce je zcela smysluplná. Nicméně není vždy ideální. Proto byl v HTML5 představen atribut sandbox, díky němuž mohou být prohlížečům explicitně sděleny oprávnění, která by měly být přiřazeny vloženému obsahu z externí stránky do iFramu.
<iframe sandbox="allow-forms" src="getusercontent.cgi?id=12193"> </iframe>
iFramy, které jsou vybaveny atributem sandbox, nemají přístup k DOM vestavěné webové stránky. Navíc nesmějí spouštět skripty a ukládat cookies. Tyto restrikce lze odbourat různými hodnotami písku (sandbox).
Různé hodnoty mohou být přiděleny atributu sandbox. Díky allow-forms může vestavená webová stránka získat pomocí formulářů informace od uživatele. Uživatelé však nejsou informováni o tom, že formulář není z aktuální stránky.
Pokud se naopak uvádí allow-some-origin, je vestavená webová stránka považována za pocházející z téhož hostitele. Tímto způsobem je zrušena politika stejného původu (Same Origin Policy).
Hodnota allow-top-navigation umožňuje vestavenému obsahu změnit obsah nejvyššího prohlíženého kontextu.
A pak tu je ještě allow-script. Tím je vložené webové stránce umožněno obsahovat JavaScript, který může manipulovat nadřazenou stránku.
Zde je příklad, jak by takový příkaz sandbox mohl vypadat:
<iframe sandbox="allow-same-origin" src="http://www.psd-tutorials.de/"> </iframe>
Ale můžete také přiřadit různé hodnoty. Tyto hodnoty jsou od sebe odděleny mezerou. Zde je další příklad:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://www.psd-tutorials.de/"> </iframe>
iFramy jsou obvykle určeny k vestavování externích obsahů. Alternativně však mohou být také zahrnuty.
<iframe src="http://www.psd-tutorials.de/" width="200" height="150" seamless> </iframe>
Tento atribut má skutečně své účinky. Cílové odkazy v začleněném dokumentu se - pokud nebylo definováno něco jiného - zobrazují v okně prohlížeče, ve kterém byl prvek iframe definován. (Při běžném vložení jsou cílové odkazy zobrazeny v iFrame okně, pokud není definováno jinak).Seamless je momentálně podporován pouze v Google Canary, tedy ve vývojové verzi tohoto prohlížeče.
Další efekt se týká stylopisů. Stylopisy zahrnutého souboru platí i pro zahrnutý dokument. (Při běžném vložení stylopisy neplatí).
Dalším nově přidaným atributem je srcdoc, pomocí něhož lze přímo definovat obsah k začlenění. Podívejte se na následující příklad:
<iframe sandbox="allow-same-origin allow-forms allow-scripts"
seamless="seamless" srcdoc="
<script>
top.location.href=" http://www.psd-tutorials.de/"
</script>">
</iframe>V tomto případě chybí src atribut, který obvykle udává soubor, který má být začleněn.
Obsah specifikovaný pomocí srcdoc je pak zpracováván tak, jako by pocházel z cizího serveru. Podléhá tedy plně politice stejného původu (Same Origin Policy). Toto chování je zajímavé například v souvislosti se definicemi skriptů. Je povolený jakýkoli HTML a JavaScript kód, ale uvozovky a znak „&“ musí být nahrazeny speciálními značkami " resp. &.
Zde můžete přímo definovat stránku a zobrazit požadovaný obsah.
<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>
Nemusí se jednat o kompletní HTML soubor. Samozřejmě je možné také něco takového:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc="<p>PSD-Tutorials.de</p>"> </iframe>
V prohlížeči to pak vypadá takto:
Jedná se tedy o zcela běžnou syntaxi HTML bez skriptů atd.
Několik poznámek k atributům, které doposud sloužily k vizuálnímu formátování: Věci jako scrolling, marginwidth a marginheight již v HTML5 nejsou povoleny. Tyto atributy jsou nahrazeny CSS.
