Ako a kedy použiť rámčeky (Inline Frames)

Anonim

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. Odporúčané súbory iframe 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 src atribút
  • pieskovisko- zoznam funkcií, ktoré by mali byť povolené alebo zakázané v okne rámčeka
  • bezproblémový-Vytvára používateľského agenta, ktorý má byť vykreslený, 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 na prepojenie s popisom
  • - namiesto toho použite CSS plavák vlastnosť
  • allowtransparency- namiesto toho použite CSS pozadie vlastnosť, či je ifram transparentný
  • - namiesto použitia hraničné Vlastnosť CSS
  • marginheight- namiesto toho použite CSS okraj vlastnosť
  • marginwidth- namiesto toho použite CSS okraj vlastnosť
  • - namiesto toho použite CSS pretekať vlastnosť

Podpora prehliadača IFRAME

IFRAME element 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 hoci všetky prehliadače podporujú IFRAME prvok, stále existuje obmedzená podpora niektorých funkcií HTML5.

  • Použitím pretekať vypnutie rolovania nie je spoľahlivé. Ak nechcete, aby sa vaše rámčeky nachádzali na posuvných lištách, mali by ste pokračovať v používaní rolovanie atribútov.
  • srcdoc, pieskovisko, a bezproblémový atribúty v súčasnosti nepodporujú žiadne prehliadače.

Prepojenie s rámcami Iframes

Keď zadáte svoje prvky iframe a názov alebo id potom môžete odkazy na daný rám s atribútom na element. 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:

id = "myIframe" src = "http://webdesign.about.com/#lp-main" výška = "200px" šírka = "500px">

Toto je môj rámček

Po kliknutí na tento odkaz sa otvorí nový dokument vo vyššie uvedenom okne.

Ak sa dokument otvoril v priečinku IFRAME nemá nastavené žiadne ciele, potom sa všetky tieto odkazy otvoria v rovnakom iframe ako nadradený dokument.

Túto funkciu môžete použiť na vytvorenie odkazov v jednom IFRAME zmeniť obsah iného IFRAME na rovnakej stránke.

IFrames a zabezpečenie

IFRAME prvok 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 dosiahne tým, že odkazy ukazujú na neviditeľné IFRAME a tieto skripty vypustili škodlivý 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ť.

K dispozícii sú tiež počítačové vírusy, ktoré budú injekčné neviditeľné IFRAME do vašich webových stránok, efektívne premeniť vaše webové stránky na botnet. Môžu to robiť prostredníctvom SQL injection a iných útokov.

Čo treba pamätať pri zahrnutí IFRAME na vašej webovej stránke je, ž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 lokalita 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

Redakcia Choice