Jednostavan način da neki eksterni HTML sadržaj prikažete u okviru svoje HTML stranice je iFrame tag. Premda već duže vreme postoji kao deo standarda, nisam imao mnogo prilike da vidim njegove naprednije primene, a pogotovo ne mehanizme za komunikaciju između sadržaja iFrame taga i stranice koja ga hostuje. Ovo je delom zbog toga što za tako čime retko postoji potreba, delimično zbog ograničene podrške u starim verzijama browsera, a svakako i zato što web programeri ne poznaju sve njegove mogućnosti.

iFrame

Primer upotrebe iFrame elementa prikazan je u kodu ispod.

<iframe
    id="ifr" name="ifr"
    src="iframe-cont.html" srcdoc="<p>some html content</p>"
    width="100%" height="400"
    seamless="seamless" // može i frameborder="0"
    sandbox="" // allow-same-origin allow-scripts allow-popups allow-forms
>
     <h2>Ako nije podržan iFrame, pisaće ovo</h2>
</iframe>

NAME atribut služi da biste se referencirali na prozor iFramea i obično ima istu vrednost kao i ID.

Širina i visina definišu veličinu prozora. Na žalost, u većini browsera nije moguće definisati procentualno visinu, pa se programeri dovijaju i dinamički određuju visinu prozora u zavisnosti od raspoloživog prostora pomoću JavaScripta, najčešće korišćenjem jQuery biblioteke.

SRC atribut određuje adresu HTML stranice koja će biti učitana u iFrame. Postoji i novi atribut SRCDOC u koji možete da upišete HTML sadržaj, odnosno deo DOM-a direktno. Ovaj atribut je uvek “stariji” os SRC-a i ako su definisana oba njegov sadržaj će biti prikazan. Na žalost, SRCDOC je još uvek relativno slabo podržan u browserima pa ne preporučujemo njegovo korišćenje osim u izuzetnim slučajevima.

SEAMLESS je takođe novi atribut. Naime, po defaultu iFrame ima okvir čija boja i debljina zavise od tipa i verzije browsera. Ovim atributom (ne mora da ima vrednost) okvir se poništava. Isti efekat je moguće postići i atributom FRAMEBORDER, pri čemu vrednost 0 znači da okvira neće biti.

SANDBOX je atribut važan za zaštitu od sigurnosnih problema koji mogu nastati učitavanjem eksternog sadržaja. SANDBOX atribut sa praznom vrednošću znači da neće biti dozvoljeno izvršavanje skripta, ptvaranje dodatnih prozora ili postovanje formi iz stranice koja je učitana u iFrame. Kao što je navedeno u primeru iznad, moguće je navesti koje konkretno dozvole želite da date učitanoj stranici. Možete ih navesti više, odvojene razmakom. Izostanak SANDBOX atributa daje sve dozvole učitanoj eksternoj stranici.

Komunikacija

iFrame se ponaša kao bilo koji drugi prozor, odnosno frame na HTML stranici. To znači da je moguća komunikacija između prozora “domaćina” i njega.

Na sadržaj iFrame elementa možete da se referencirate sa

window.frames[0]  ili  window.frames["frameName"]

Naravno, preciznije je referenciranje korišćenjem imena, pri čemu je frameName vrednost NAME atributa iFrame elementa. Osim toga, možete koristiti i getDocumentById metod za referencu na iFrame, u kom slučaju kao argument koristite ID atribut.

Jednom kada ste dobili referencu na iFrame element, window i document objekte stranice koja je u njega učitana možete da dobijete očitavanjem propertija

(iframe element).contentWindow ili (iframe element).contentDocument

A zatim koristiti sve metode koje biste inače primenjivali nad window i document objektima neke stranice. Obratite samo pažnju da contentDocument atribut nije podržan u Internet Exploreru 8 i starijim verzijama.

Ako imate pristup window objektu, možete iz JavaScript koda stranice “domaćina” pozivati sve funkcije koje postoje na učitanom sadržaju. Problem je što u tom slučaju važi “same origin policy” odnosno neće biti dozvoljena direktna komunikacija ako obe stranice nisu na istom domenu, portu i protokolu.

Lepa vest je što između window objekata, bez obzira na to da li pripadaju istom domenu, možete da razmenjujete poruke korišćenjem

(window element).postMessage(message, "*");

Drugi argument u postMessage funkciji određuje kojim domenima je dozvoljeno slanje poruka. Zvezdica označava bilo koji domen. Na ovaj način moguće je razviti različite napredne funkcionalnosti korišćenjem iFrame elementa.

p

U ovom članku

  • Osnovno o iFrame elementu
  • Novi atributi i kako ih primenjivati
  • Pristup elementima učitane stranice
  • Komunikacija bez granica