Inline Frames vám umožňujú zahrnúť obsah z externých zdrojov na vaše stránky
Inline rámce, bežne len označované ako "iframe", sú jediným typom rámca povoleného v HTML5. Tieto rámčeky sú v podstate časťou vašej stránky, ktorú vyrežete. Na mieste, ktoré ste vynechali zo stránky, môžete potom napĺňať externú webovú stránku. V skutočnosti je iframe iným oknom prehliadača nastaveným priamo vo vašej webovej stránke. Vidíte, či sú rámce, ktoré sa bežne používajú na webových stránkach, ktoré musia obsahovať externý obsah, ako je mapa Google alebo video z YouTube.
Obe tieto populárne webové stránky používajú prvky iframe vo svojom embed kóde.
Ako používať prvok IFRAME
Prvok používa globálne prvky HTML5, ako aj niekoľko ďalších prvkov. Štyri sú tiež atribúty v jazyku HTML 4.01:
- - adresa URL zdroja rámca
- - výška okna
- - šírka okna
- - názov okna
Tri sú v HTML5 nové:
- srcdoc - HTML pre zdroj rámca. Tento atribút má prednosť pred akoukoľvek adresou URL v atribúte src
- karanténa - zoznam funkcií, ktoré by mali byť povolené alebo zakázané v okne rámčeka
- bezproblémový - informuje používateľského agenta, že iframe by mal byť vykresľovaný, akoby bol neviditeľne súčasťou nadradeného dokumentu
Ak chcete vytvoriť jednoduchý iframe, nastavte zdrojovú adresu URL a šírku a výšku:
Upozorňujeme, že sa môžete rozhodnúť nepoužívať hodnoty pixelov pre nastavenia vášho rámčeka iframe, ale namiesto toho sa rozhodnete použiť percento.
Ak vytvárate citlivú webovú stránku, ktorej veľkosť by sa mala meniť v rôznych veľkostiach obrazovky, tieto percentá budú dôležité.
Existujú aj niektoré atribúty, ktoré sú platné v jazyku HTML 4.01, ale v HTML5 sú zastarané. Keďže väčšina webových stránok dnes používa formát HTML5, tieto atribúty sú tie, ktoré nechcete používať (ale ktoré sa môžu zobraziť v niektorých pôvodných dokumentoch).
- - namiesto toho použite prvok A na prepojenie s popisom
- - namiesto toho použite vlastnosť float CSS
- allowtransparency - namiesto použitia vlastností pozadia CSS, aby sa ifram priehľadný
- - namiesto použitia vlastností hranice CSS
- marginheight - namiesto toho použite vlastnosť okraja CSS
- marginwidth - namiesto toho použite vlastnosť okraja CSS
- - namiesto toho použite vlastnosť pretečenia CSS
Podpora prehliadača IFRAME
Prvok IFRAME je podporovaný všetkými modernými prehliadačmi:
- Android
- chróm
- Firefox
- Internet Explorer 2+
- iOS / Safari Mobile
- Netscape 7+
- Opera 3+
- safari
Ak sa vo vyššie uvedenom zozname nenachádza žiadne číslo verzie, je to preto, že to podporujú všetky verzie tohto prehliadača.
Jedna vec, ktorú treba mať na pamäti, je, že zatiaľ čo všetky prehliadače podporujú prvok IFRAME, pre niektoré funkcie HTML5 je stále obmedzená podpora.
- Použitie pretečenia na vypnutie posúvania nie je spoľahlivé. Ak nechcete, aby sa vaše rámčeky nachádzali v posuvných riadkoch, mali by ste pokračovať v používaní atribútu rolovania.
- Atribúty srcdoc, sandbox a hladké atribúty v súčasnosti nepodporujú žiadne prehliadače.
Prepojenie s rámcami Iframes
Keď zadáte vaše či už prvky iframe alebo id, potom môžete umiestniť odkazy na daný rám s atribútom na prvku A. Potom, keď používateľ klikne na odkaz, otvorí sa vo vnútri odkazovanej iframe namiesto aktuálneho okna.
Vyskúšajte sami. Do webovej stránky zadajte nasledujúce:
Ak dokument otvorený v nástroji IFRAME nemá nastavené žiadne ciele , všetky tieto odkazy sa otvoria v rovnakom iframe ako nadradený dokument.
Túto funkciu môžete použiť na vytvorenie prepojení v jednom IFRAME zmene obsahu iného IFRAME na rovnakej stránke.
IFrames a zabezpečenie
Prvok IFRAME sám osebe nie je bezpečnostným rizikom pre vás alebo vašich čitateľov.
Bohužiaľ, iframe získali zlú reputáciu, pretože môžu byť použité škodlivými webovými lokalitami na zahrnutie obsahu, ktorý môže infikovať počítač návštevníka bez toho, aby ho videli na stránke. To sa deje pomocou odkazov na neviditeľný IFRAME a tie skripty vypnú nebezpečný kód. Používateľ klikne na odkaz a myslí si, že odkaz je prerušený, pretože sa nič nestalo, ale scenár bol vypustený tam, kde ho nemohli vidieť.
Existujú aj počítačové vírusy, ktoré na vaše webové stránky vnesú neviditeľný IFRAME, čím účinne premenia vaše webové stránky na botnet. Môžu to robiť prostredníctvom SQL injection a iných útokov.
Pamätajte na to, keď ste na svojej webovej stránke zahrnuli IFRAME, že vaši používatelia sú rovnako bezpeční ako obsah všetkých stránok, na ktoré odkazujete. Ak máte dôvod domnievať sa, že stránka je nedôveryhodná, neodkazujte na ňu žiadnym spôsobom a určite nezahŕňajte jej obsah do IFRAME. Prepojenie s vašimi vlastnými stránkami v rámcoch iframe však nepredstavuje bezpečnostné riziko pre vás alebo vašich používateľov.
Originálny článok od Jennifer Krynin. Upravený dňa 11/7/16 Jeremy Girard