HTML & CSS pradedantiesiems.

HTML ir CSS pradedantiesiems (24 dalis): iFrames

Visi pamokos vaizdo įrašai HTML ir CSS pradedantiesiems

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:

HTML ir CSS pradedantiesiems (24 dalis): įterpimo rėmai

Į 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.

HTML & CSS pradedantiesiems (24 dalis): įterpimo rėmai

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.

HTML ir CSS pradedantiesiems (24 dalis): įterpintų rėmeliai



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 &quot; ir &amp;.

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:

HTML ir CSS pradedantiesiems (24 dalis): iFrames



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.