Tag <iframe> upotrebljava se za umetanje vanjskog sadržaja u dokument (Inline FRAME).
To je najčešće neka druga web stranica tj. neki drugi HTML dokument.
IFRAME je inline element što znači da sadržaj prikazuje u istoj liniji bez LINE BREAK.
Atributi IFRAME taga
Određeni atributi koji su vrijedili u HTML4.01 više ne vrijede u HTML5. To su: align, frameborder, longdesc, marginheight, marginwidth i scrolling
width="integer" i height="integer"
Ova dva atributa definiraju širinu i visinu ifrejma u pixelima.
Ovo se također može postići i pomoću CSS-a kao što se može vidjeti u primjeru dolje.
Primjer: vidi code » vidi stranicu
src="string"
Definira URL adresu dokumenta koji se umeće u web stranicu.
name="string"
Definira 'name' tj. naziv koji se može upotrijebiti kao 'target' atribut u a
ili form elementu.
Primjer: vidi code » vidi stranicu
seamless
Prikazuje IFRAME kao dio stranice, odnosno ne prikazuje okvir oko ifrejma.
Ovaj atribut radi samo u Chrome browseru, pa je zato bolje koristiti CSS!
Primjer: vidi code » vidi stranicu
srcdoc="HTML code"
Određuje HTML code koji će se prikazati u ifrejmu.
Primjer: vidi code » vidi stranicu
sandbox atribut
Atribut sandbox koristi se zbog sigurnosti web stranice na koju postavljamo nekakav ifrejm sadržaj.
sandbox="allow-forms | allow-same-origin | allow-scripts | allow-top-navigation"
Ukoliko stavimo sandbox="" tj bez argumenata ifrejm neće dozvoljavati:
- Javscript skripte
- pristup Cookie, DOM, itd.
- otvaranje novog prozora sa window.open ili target="_blank"
- potvrđivanje formulara iako će form biti prikazan
- učitavanje plugin-ova (npr. flash)
- navigaciju izvan frejma npr. target="_top" neće raditi
- autoplay video, autofokus form element
- seamless atribut će biti ignoriran
sandbox="allow-forms"
Omogućava upotrebu formulara. Submit dugme će raditi.
Primjer: vidi code » vidi stranicu
sandbox="allow-same-origin"
Omogućava da se sadržaj unutar ifrejma smatra istog porijekla kao vanjski, okolni sadržaj.
Na taj način se omogućuje sadržaju unutar ifrejma da pristupa cookijima, pristup DOM elementima itd.
sandbox="allow-scripts"
Omogućava upotrebu Javascripta unutar ifrejma.
Primjer - sandbox="": vidi code » vidi stranicu
Primjer - sandbox="allow-scripts": vidi code » vidi stranicu
Primjer - bez sandbox atributa: vidi code » vidi stranicu
sandbox="allow-top-navigation"
Omogućava učitavanje vanjskog sadržaja izvan ifrejma, npr. u Top prozor pomoću target="_top".
Primjer - sandbox="": vidi code » vidi stranicu
iframe YouTube
Youtube koristi iframe za umetanje videa u HTML dokument.