HTML & CSS pre úplných začiatočníkov (časť 24): iFrames.

iFrames sú už dlho súčasťou štandardu HTML. V HTML 4.0 boli však spolu so teraz zastaralými rámami zabaleny do variantu Frameset-HTML. Rámy v HTML5 už nie sú zohľadnené, no vložené rámiky (iFrames) áno.

Pomocou iFrames je možné vložiť iné webové stránky. Prehliadač teda vykresľuje ďalší HTML súbor v rámci aktuálnej webovej stránky. Obsah okna iFrame je možné individuálne formátovať.

Keď hovoríme o iFrames, je samozrejme potrebné venovať osobitnú pozornosť aj bezpečnosti tejto HTML techniky. Problémom je tu škodlivý kód, ktorý môže byť nezaznamenaným spôsobom vkladaný do webových stránok cez iFrames. To je samozrejme obrovským problémom.

V HTML5 však existujú primerané bezpečnostné mechanizmy, ktoré umožňujú obísť tieto problémy. Viac sa o nich dozviete v ďalšom priebehu tohto tutorialu. Pred použitím iFrames je však stále dôležité mať na pamäti, že môžu predstavovať potenciálnu hrozbu, najmä aj preto, že nové bezpečnostné atribúty zďaleka nie sú podporované vo všetkých prehliadačoch.

V HTML5 teda iFrames patria medzi pevný štandard a prinášajú niekoľko ďalších atribútov. Nasledujúci príklad ukazuje, ako je možné definovať iFrames.

<iframe src="http://www.psd-tutorials.de/" 
   width="420" 
   height="350">
   <a href="http://www.psd-tutorials.de/">PSD-Tutorials.de</a>
</iframe>

V prehliadači vyzerá výsledok nasledovne:

Prvok iframe je priradený atribútu src. Tento src obsahuje hodnotu stránky, ktorá sa má zobraziť. Môže to byť aj lokálny súbor. Možné je však aj – ako je to ukázané v príklade – načítanie externého zdroja.

Šírka a výška iFramov sú určené pomocou atribútov width a height. Ak je vložený obsah väčší ako zadaná veľkosť iFramu, zobrazia sa posuvníky.

Medzi otváracím a zatváracím tagom <iframe> je možné definovať akýkoľvek obsah. Tento je však viditeľný iba v prehliadačoch, ktoré nepoznajú prvok iframe.

V HTML5 sú pre iFrames zavedené niektoré nové atribúty, ktoré sú predovšetkým spojené s tzv. správaním sa kódu v rámci zabezpečenia (Sandbox).

V prehliadačoch zabezpečuje politika Same Origin, že vložená webová stránka počas zobrazovania nemôže byť manipulovaná. Táto bezpečnostná funkcia má svoj význam. Napriek tomu nie je vždy ideálna. Preto bol v HTML5 zavedený atribút sandbox, cez ktorý je možné explicitne informovať prehliadače, aké povolenia majú byť priradené obsahu vloženému z externého zdroja v iFrame.

<iframe 
   sandbox="allow-forms" 
   src="getusercontent.cgi?id=12193">
</iframe>

iFrames, ktoré sú vybavené atribútom sandbox, nemajú prístup k DOM vloženej webovej stránke. Okrem toho nesmú vykonávať skripty a ukladať cookies. Tieto obmedzenia je možné zrušiť rôznymi hodnotami v Sandbox.

Atribútu sandbox možno priradiť rôzne hodnoty. Pomocou allow-forms môže vložená webová stránka získavať informácie od používateľa cez formuláre. Používatelia nevedia, že formulár nie je z aktuálnej stránky.

Ak sa však použije allow-some-origin, vložená webová stránka sa bude správať tak, ako keby pochádzala z rovnakého hostiteľa. Týmto spôsobom je politika Same Origin zrušená.

Hodnota allow-top-navigation umožňuje vloženému obsahu meniť obsah najvyššieho prehliadačového kontextu.

A existuje aj allow-script. Tým sa umožní obsahu vkladanej webovej stránky obsahovať JavaScript, ktorý môže manipulovať stránku, do ktorej je vložený.

Ukážka toho, ako by mohla vyzerať príslušná inštrukcia k sandbox:

<iframe 
   sandbox="allow-same-origin"
   src="http://www.psd-tutorials.de/">
</iframe>

Ale môžete tiež priradiť viac hodnôt. Tieto sú od seba oddelené medzerou. Opäť tu je príklad:

<iframe 
   sandbox="allow-same-origin allow-forms allow-scripts"
   src="http://www.psd-tutorials.de/">
</iframe>

iFrames sú zvyčajne určené na vloženie externých obsahov. Avšak je možné ich aj inkludovať.

<iframe 
   src="http://www.psd-tutorials.de/" 
   width="200" height="150" 
   seamless>
</iframe>

Tento atribút má svoje vlastnosti. Odkazy v zahrnutom dokumente sa nezobrazia v novom okne prehliadača, pokiaľ nie je definované inak – v ktorom bolo definované iframe. (Pri bežnom vložení sa odkazy zobrazenia v iFrame okne).

Seamless momentálne podporuje iba Google Canary, teda vývojová verzia tohto prehliadača.

Ďalším efektom sú štýly. Štýly zahrnutej súboru sa aplikujú aj na zahrnutý dokument. (Pri bežnom vložení sa štýly neuplatňujú).

Pridaný bol aj nový atribút. S srcdoc je možné priamo definovať obsah na vloženie. Pozrite si nasledujúci prí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 prípade chýba atribút src, cez ktorý sa zvyčajne udáva súbor, ktorý sa má zahrnúť.





Obsah uvedený pomocou srcdoc je spracovaný ako keby pochádzal z cudzieho servera. Preto podlieha plne Same Origin Policy. Toto správanie je zaujímavé napríklad v súvislosti so skriptovými definíciami. Do nich je povolený akýkoľvek HTML a JavaScript kód. Avšak treba zdôrazniť, že úvodzovky a symbol „&“ musia byť nahradené týmito znakmi " a &.

Môžete tu priamo definovať stránku a týmto spôsobom získať 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>

Pritom nemusí ísť o úplný HTML súbor. Samozrejme je možné aj niečo podobné ako toto:

<iframe sandbox="allow-same-origin allow-forms allow-scripts" 
seamless="seamless" srcdoc="<p>PSD-Tutorials.de</p>">
</iframe>

V prehliadači to potom vyzerá nasledovne:





Je to teda úplne bežná HTML syntax, bez skriptov atď.

Ešte niekoľko poznámok k atribútom, ktoré sa doteraz používali na vizuálne formátovanie: Veci ako scrolling, marginwidth a marginheight nie sú v HTLM5 viac povolené. Tieto atribúty sú nahradené pomocou CSS.