Načrtovanje in razvoj spletnih aplikacij
Nazaj
Naprej

I-okvirji

Oznaka <iframe> omogoča prikaz druge HTML strani oziroma druge vsebine znotraj trenutne spletne strani. Tak okvir imenujemo tudi vdelani okvir ali i-okvir.

Osnovna oblika oznake je:

<iframe src="naslov_strani.html"></iframe>

Pomni: Oznaka <iframe> predstavlja vdelan dokument z lastnim oknom brskanja znotraj trenutne strani.

Osnovna pravila

  • Z oznako <iframe> v dokument vključimo drugo spletno vsebino.
  • Atribut src določa naslov vdelanega dokumenta.
  • Velikost i-okvirja določimo z atributoma width in height.
  • Z atributom title opišemo vsebino i-okvirja.
  • Po potrebi lahko vsebino določimo neposredno z atributom srcdoc.

Pozor: Vsak i-okvir predstavlja samostojen dokumentni prostor, zato lahko večje število i-okvirjev poveča porabo pomnilnika in vpliva na zmogljivost strani.

Pogosti atributi oznake <iframe>

  • src – določa naslov dokumenta, ki ga vključimo v i-okvir,
  • width in height – določata širino in višino i-okvirja,
  • name – določa ime i-okvirja, ki ga lahko uporabimo kot cilj povezave ali obrazca,
  • srcdoc – določa HTML vsebino, ki se prikaže neposredno v i-okvirju,
  • sandbox – omeji delovanje vsebine v i-okvirju,
  • loading – določa, ali se i-okvir naloži takoj ali pozneje,
  • referrerpolicy – določa pravilo pošiljanja podatkov o izvorni strani,
  • allowfullscreen – omogoča celozaslonski prikaz, kjer je to smiselno.

Če uporabimo atribut srcdoc, se prikaže HTML koda iz tega atributa. V takem primeru ima srcdoc prednost pred atributom src.

Primer z atributom src

V i-okvir lahko vključimo drugo HTML datoteko:

<iframe src="okvir.html" width="500" height="200" title="Primer i-okvirja"></iframe>

Primer z atributom srcdoc

Namesto zunanje datoteke lahko HTML vsebino zapišemo neposredno v atribut srcdoc:

<iframe
width="500"
height="200"
srcdoc="<h3>Pozdrav</h3><p>To je vsebina znotraj i-okvirja.</p>">
</iframe>

I-okvir kot cilj povezave

I-okvir lahko uporabimo tudi kot cilj povezave. Atributu target pri povezavi določimo isto vrednost, kot jo ima atribut name pri i-okvirju. Atribut name je torej ciljano ime vdelanega prostora.

<p>
  <a href="https://www.example.com" target="mojOkvir">Odpri stran v i-okvirju</a>
</p>

<iframe name="mojOkvir" width="500" height="200"></iframe>

Odpri stran v i-okvirju

Primer z atributom sandbox

Atribut sandbox omeji delovanje vsebine v i-okvirju. Če je atribut prazen, se uporabijo vse omejitve; z dodatnimi ključnimi besedami pa lahko posamezne omejitve sprostimo. Taka raba poveča varnost pri prikazu manj zaupanja vredne vsebine.

<iframe
width="500"
height="150"
sandbox
srcdoc="<p>To je varneje prikazana vsebina v i-okvirju.</p>">
</iframe>

Primer z atributom loading

Atribut loading določa, kdaj naj se i-okvir naloži. Vrednost eager pomeni takojšnje nalaganje, vrednost lazy pa zakasnjeno nalaganje, ko se i-okvir približa vidnemu delu strani. Tak pristop lahko izboljša zmogljivost in skrajša začetni čas nalaganja strani.

<iframe
src="okvir.html"
width="500"
height="200"
loading="lazy"
title="Počasneje naložen i-okvir">
</iframe>

Varnost in omejitve

Vseh zunanjih spletnih strani ni mogoče prikazati v i-okvirju. Nekatera spletna mesta vdelavo blokirajo zaradi varnostnih pravil ali pravil strežnika. Zato je za učne primere pogosto primernejša uporaba lastne HTML datoteke ali atributa srcdoc.

Pri delu z i-okvirji je priporočljivo razmisliti o varnosti, zasebnosti in zmogljivosti strani. Atributi sandbox, loading in referrerpolicy so pri tem posebej pomembni.

Priporočila

  • Za vdelavo drugega dokumenta uporabljaj oznako <iframe>.
  • Vedno dodaj smiseln atribut title.
  • Za preproste učne primere uporabi srcdoc ali lastno datoteko.
  • Pri manj zaupanja vredni vsebini razmisli o atributu sandbox.
  • Za zakasnjeno nalaganje po potrebi uporabi loading="lazy".

Pogoste napake

  • I-okvir nima atributa title.
  • Predpostavlja se, da je mogoče vsako zunanjo stran prikazati v i-okvirju.
  • Pri nezaupanja vredni vsebini ni uporabljen atribut sandbox.
  • Atribut srcdoc je uporabljen brez upoštevanja, da ima prednost pred atributom src.
  • Pri večjem številu i-okvirjev ni upoštevan vpliv na zmogljivost strani.
Nazaj
Naprej