iFrames sunt deja o parte a standardului HTML de mult timp. În HTML 4.0, ele au fost împachetate împreună cu cadrele deja obsolete în varianta HTML Frameset. Cadrele nu mai sunt luate în considerare în HTML5, dar cadrul înglobat (iFrames) sunt.
Prin intermediul iFrames-urilor, alte site-uri web pot fi integrate. Astfel, browserul afișează un alt fișier HTML în cadrul site-ului web curent. Conținutul ferestrei iFrame poate fi formatat individual.
Când vine vorba despre iFrames, trebuie să se ia în considerare și securitatea acestei tehnologii HTML. O problemă aici este codul rău intenționat care poate fi injectat în site-uri web prin intermediul iFrames. Acest lucru este desigur o mare enervare.
În HTML5, există însă mecanisme corespunzătoare de securitate care pot ajuta la evitarea acestor probleme. Mai multe despre acest subiect vor fi discutate mai târziu în acest tutorial. Cu toate acestea, înainte de a folosi iFrames, este important de luat în considerare faptul că acestea reprezintă potențial un pericol, mai ales deoarece noile atribute de securitate nu sunt încă suportate de toți browserele.
În HTML5, iFrames fac parte din standardul fix și aduc câteva atribute suplimentare aici. Exemplul următor arată cum pot fi definite iFrames-urile.
<iframe src="http://www.psd-tutorials.de/" width="420" height="350"> <a href="http://www.psd-tutorials.de/">PSD-Tutorials.de</a> </iframe>
În browser, rezultatul arată în felul următor:
Elementului iframe i se atribuie atributul src. Acest src conține ca valoare pagina care trebuie afișată. Aceasta poate fi un fișier local sau, așa cum este cazul exemplului prezentat, apelul unei resurse externe.
Prin cele două atribute width și height sunt stabilite lățimea și înălțimea iFrame-ului. În cazul în care conținutul încorporat este mai mare decât dimensiunea specificată a iFrame-ului, se vor afișa bare de derulare.
Între etichetele de deschidere și închidere <iframe> pot fi definite conținuturi arbitrare. Acestea vor fi vizibile însă exclusiv în browserele care nu cunosc elementul iframe.
Există introduși în HTML5 câțiva noi atribute legați de iFrames, care au în mare măsură de a face cu ceea ce se numește comportament Sandbox.
<iframe sandbox="allow-forms" src="getusercontent.cgi?id=12193"> </iframe>
iFrames-urile care sunt dotate cu atributul sandbox nu au acces la DOM-ul site-ului web încorporat. În plus, nu li se permite să ruleze scripturi sau să salveze cookie-uri. Aceste restricții pot fi eliminare prin diverse valori Sandbox.
Atributului sandbox i se pot atribui diverse valori. Prin allow-forms, site-ului web încorporat i se permite să solicite informațiile utilizatorului prin formulare. Utilizatorii nu știu că formularul nu provine de pe pagina curentă.
Dacă se specifică allow-some-origin, site-ul web încorporat este tratat ca și cum ar proveni de pe același gazdă. Prin această valoare, politica de aceeași origine este eliminată.
Valoarea allow-top-navigation permite conținutului încorporat să modifice conținutul contextului de navigare de sus.
Există și valoarea allow-script. Astfel, site-ul web încorporat poate conține JavaScript care poate manipula pagina care îl încorporează.
<iframe sandbox="allow-same-origin" src="http://www.psd-tutorials.de/"> </iframe>
De asemenea, este posibil să atribuiți mai multe valori. Acestea trebuie separate între ele de spații. Mai jos găsiți un exemplu:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://www.psd-tutorials.de/"> </iframe>
iFrames-urile sunt de obicei concepute pentru a încorpora conținut extern. În mod alternativ, acest conținut poate fi de asemenea inclus.
<iframe src="http://www.psd-tutorials.de/" width="200" height="150" seamless> </iframe>
Acest atribut are implicații semnificative. Astfel, țintele din documentul inclus - dacă nu este definit altfel - sunt afișate în fereastra browserului în care a fost definit elementul iframe (la includerea normală, țintele sunt afișate în fereastra iFrame-ului, dacă nu este definit altfel).
Momentan, seamless este suportat doar de Google Canary, adică versiunea pentru dezvoltatori a acestui browser.
Celălalt efect se referă la foile de stil. Deci, stilurile fișierului includent sunt valabile și pentru documentul inclus. (La includerea normală, specificațiile de stil nu sunt valabile).
A fost introdus un alt atribut nou. Cu srcdoc putem defini direct conținutul de încorporat. Urmăriți exemplul de mai jos:
<iframe sandbox="allow-same-origin allow-forms allow-scripts"
seamless="seamless" srcdoc="
<script>
top.location.href=" http://www.psd-tutorials.de/"
</script>">
</iframe>În acest caz, lipsește atributul src, prin care în mod normal se specifică fișierul de includere.
Conținutul specificat prin srcdoc este tratat ca și cum ar proveni de la un server străin. Prin urmare, este supus pe deplin politicii Same Origin. Acest comportament este interesant, de exemplu, în legătură cu definițiile scripturilor. Este permis orice cod HTML și JavaScript. Cu toate acestea, ghilimelele și simbolul “și” trebuie descrise folosind caracterele numite " sau &.
Puteți defini aici direct o pagină și, astfel, puteți afișa conținutul dorit.
<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>
Nu trebuie neapărat să fie vorba despre un fișier HTML complet. Este desigur posibil și ca ceva de genul acesta:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc="<p>PSD-Tutorials.de</p>"> </iframe>
În browser, acest lucru arată astfel:
Aceasta este, deci, sintaxa HTML obișnuită, fără scripturi etc.
Câteva indicații suplimentare referitoare la atributele care au fost utilizate până acum pentru stilizare: elementele precum scrolling, marginwidth și marginheight nu mai sunt permise în HTML5. Aceste atribute sunt înlocuite de CSS.
