iFrames jau seniai yra HTML standarte. HTML 4.0 juos buvo įtraukę kartu su dabar jau atskaičiuotais „Frames“ į „Frameset“ HTML variantą. „Frames“ nebetenkami HTML5, o įterptieji rėmai ("iFrames") taip.
Naudojant iFrames, galima įterpti kitas svetaines. Naršyklė taigi renderuoja papildomą HTML failą šiuo metu esamoje svetainėje. iFrame langų turinį galima individualiai formatuoti.
Kalbant apie iFrames, žinoma, būtina dar kartą atkreipti dėmesį į šios HTML technikos saugumą. Čia problema kelia kenksmingas kodas, kuris gali būti net pastebimas svetainėse, įterptose per iFrames. Šis žinoma yra labai nemalonus dalykas.
Tačiau HTML5 jau turi atitinkamus apsaugos mechanizmus, kurie leidžia išvengti šių problemų. Daugiau informacijos apie tai bus pateikta šio vadovo vėlesniuose skyriuose. Vis dėlto prieš naudojant iFrames vis tiek reikia prisiminti, kad jos gali potencialiai kelti pavojų, ypač dėl to, kad nauji saugumo atributai vis dar nėra pritaikyti visų naršyklių.
HTML5 iFrames yra tvirto standarto dalis ir į šį puslapį įtraukia keletą papildomų atributų. Pateikiamas toliau pateiktas pavyzdys, kaip galima apibrėžti iFrames.
<iframe src="http://www.psd-tutorials.de/" width="420" height="350"> <a href="http://www.psd-tutorials.de/">PSD-Tutorials.de</a> </iframe>
Naršyklėje rezultatas atrodo taip:
Į iframe
-elementą priskiriamas src
atributas. Šis src
turi kaip reikšmę puslapį, kuris turi būti rodomas. Tai gali būti ir vietinis failas. Tačiau taip pat galimas ir išorinės išteklių pakvietimas, kaip parodyta pavyzdyje.
Naudojant dvi atributų width
ir height
yra nustatoma iFrame pločio ir aukščio vertė. Jei įtraukto turinio dydis yra didesnis nei nurodytas iFrame dydis, bus rodomi slankikliai.
Tarp atidarymo ir uždarymo <iframe>
-žymės galima apibrėžti bet kokį turinį. Tačiau jie bus matomi tik tokiuose naršyklėse, kurios nežino iframe
-elemento.
HTML5 protingų iFrames atžvilgiu įdiegiami keletas naujų atributų, kurių pagrindinis tikslas yra vadinamojo „Sandbox“ elgesio atributai.
Naršyklėse „Same Origin Policy“ užtikrina, kad įtraukta svetainė jos rodymo metu negali būti manipuliuojama. Ši saugumo funkcija yra visai naudinga. Tačiau ji ne visada yra ideali. Dėl šios priežasties HTML5 įvedė atributą „sandbox“, per kurį naršyklėms gali būti aiškiai pranešta, kokią teises turėtų būti priskirtos iFrame įterptam turiniui iš išorinio puslapio.
<iframe sandbox="allow-forms" src="getusercontent.cgi?id=12193"> </iframe>
iFrames, kurie yra aprūpinti atributu „sandbox“, neturi prieigos prie įterpto puslapio DOM. Be to, jiems neleidžiama vykdyti scenarijų ir saugoti slapukus. Šią apribojimus galima išardyti įvairiomis „Sandbox“ reikšmėmis.
Į „sandbox“ atributą galima priskirti skirtingas reikšmes. „allow-forms“ leidžia įterptam puslapiui naudoti formos ir rinkti informaciją iš naudotojo. Tolimesnis attributer vertimas sukoncentruotas tik į tos kilminės svetainės kilmę. Taip panaikinama „Same Origin Policy“.
„allow-top-navigation“ leidžia įterptam turiniui pakeisti aukščiausio naršymo konteksto turinį.
O dar yra „allow-script“. Tai leidžia įterptam puslapiui būti JavaScript, kuris gali manipuliuoti įterptą puslapį.
Čia pateikiamas pavyzdys, kaip galėtų atrodyti atitinkama „sandbox“ instrukcija:
<iframe sandbox="allow-same-origin" src="http://www.psd-tutorials.de/"> </iframe>
Taip pat galite priskirti kelias reikšmes. Jos turi būti atskirtos tarpu. Čia dar vienas pavyzdys:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://www.psd-tutorials.de/"> </iframe>
iFrames paprastai skirtos įterpti išorinius turinius. Tačiau juos galima taip pat įtraukti.
<iframe src="http://www.psd-tutorials.de/" width="200" height="150" seamless> </iframe>
Šis atributas tikrai yra svarbus. Taigi įterptasis dokumentas nuorodos tikslą – jei nieko kita nenurodyta – rodys naršyklės lange, kuriame buvo apibrėžtas iframe
-elementas. (Įprastai įtraukiant, jei nieko nenurodyta, nuorodos tikslai bus rodomos iFrame lange).seamless
šiuo metu palaiko tik „Google Canary“, šios naršyklės plėtotojo versija.
Kita poveikį turi stiliai. Įtraukiančios bylos stiliai taip pat taikomi įtraukto dokumento atžvilgiu. (Įprastai įtraukiant skaičiavimai neveikia).
Pridėtas dar vienas atributas. Su srcdoc
galima tiesiogiai apibrėžti įtraukiamą turinį. Pažiūrėkite į tokią pavyzdį:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc=" <script> top.location.href=" http://www.psd-tutorials.de/" </script>"> </iframe>
Taip atsitinka, jei trūksta src
atributo, kuris paprastai nurodo failą, kuris turi būti įtrauktas.
Turinys, nurodytas per srcdoc
, yra tvarkomas kaip iš svetainės. Taigi, jis visiškai pavaldus tos pačios kilmės principui. Ši elgsena, pavyzdžiui, yra įdomi susijusia su skripto apibrėžimais. Jame leidžiamas bet kokios rūšies HTML ir JavaScript kodas. Tačiau citatos ir & simbolis turi būti aprašyti naudojant vadinamuosius simbolius "
ir &
.
Taip pat galite tiesiogiai čia apibrėžti puslapį ir taip išvedžioti norimą turinį.
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc=" <!DOCTYPE html> <html> <head> <title>PSD-Tutorials.de</title> </head> <body> <p>…</p> </body> </html>"> </iframe>
Be abejo, tai neturi būti pilnas HTML failas. Įmanoma ir ką nors tokio kaip:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc="<p>PSD-Tutorials.de</p>"> </iframe>
Naršyklėje tai atrodys taip:
Tai visiškai normali HTML sintaksė, be jokių skriptų ir t.t.
Kai kuri informacija apie atributus, kurie iki šiol buvo naudojami vizualiniam suformavimui: dalykai kaip scrolling, marginwidth
ir marginheight
jau negalioja HTLM5. Šie atributai yra pakeisti CSS.