iFrames вече дълго време са част от HTML стандарта. В HTML 4.0 те обаче бяха съчетани с вече забранените рамки във Frameset HTML варианта. Рамките не се вземат предвид в HTML5, но вградените рамки (iFrames) се вземат предвид.
С iFrames може да вграждате други уеб сайтове. Браузърът затова рендира още един HTML файл в текущата уеб страница. Съдържанието на прозореца на iFrame може да се форматира индивидуално.
Когато става въпрос за iFrames, е необходимо да се разгледа специално сигурността на тази HTML технология. Една проблем представлява зловреден код, който може да бъде замаскиран в уеб страници през iFrames. Това е разочароваща ситуация.
В HTML5 вече съществуват подходящи механизми за сигурност, чрез които тези проблеми могат да бъдат избегнати. За повече информация относно това може да се види по-късно в този урок. Преди да се използват iFrames обаче, трябва да се има предвид, че те потенциално представляват опасност, особено защото новите атрибути за сигурност все още не са поддържани от всички браузъри.
В HTML5 iFrames са вече част от стандарта и добавят някои допълнителни атрибути. Следващият пример показва как могат да бъдат дефинирани iFrames.
<iframe src="http://www.psd-tutorials.de/" width="420" height="350"> <a href="http://www.psd-tutorials.de/">PSD-Tutorials.de</a> </iframe>
В браузъра резултатът изглежда по следния начин:
На елемента iframe се присвоява атрибута src. Този src съдържа стойността на страницата, която трябва да бъде показана. Тя може да бъде локален файл. Възможно е обаче, както в показания пример, извикването на външен ресурс.
Чрез двата атрибута width и height, се определят ширината и височината на iFrame. Ако вграденото съдържание е по-голямо от указаните размери на iFrame, се показват скролбарове.
Между отварящия и затварящия таг на <iframe> могат да бъдат дефинирани произволни съдържания. Те обаче ще бъдат видими само в браузъри, които не познават iframe елемента.
В HTML5 са въведени няколко нови атрибути за iFrames, които се отнасят предимно до така нареченото поведение на пясъчника (Sandbox behavior).
В браузърите Same Origin Policy управлява така, че вградената страница не може да бъде манипулирана по време на нейното показване. Тази функция заедно е сигурна. Все пак не е винаги идеална. Затова в HTML5 е въведен атрибута sandbox, чрез който могат да бъдат указани на браузърите ясно какви права следва да бъдат присвоени на съдържанието, вградено от външна страница в iFrame.
<iframe sandbox="allow-forms" src="getusercontent.cgi?id=12193"> </iframe>
iFrames, оборудвани с атрибута sandbox, нямат достъп до DOM на вградената страница. Освен това, те не могат да изпълняват скриптове и да запазват бисквитки. Тези ограничения могат да бъдат отменени с различни стойности за пясъчника.
На атрибута sandbox могат да бъдат присвоени различни стойности. Чрез allow-forms вградената страница може да събира информация от потребителя чрез форми. При това потребителят не знае, че формулярът не е от настоящата страница.
С указаното allow-some-origin се разрешава на вградената страница да бъде третирания като че е от същия хост. Този параметър отменя Same Origin Policy.
Стойността allow-top-navigation позволява на вграденото съдържание да променя съдържанието на горния браузър контекст.
И има allow-script. Така вградената страница може да съдържа JavaScript, който може да манипулира вградената страница.
Ето един пример за това как би могла да изглежда съответната sandbox инструкция:
<iframe sandbox="allow-same-origin" src="http://www.psd-tutorials.de/"> </iframe>
Все пак може да бъдат дефинирани и няколко стойности. Те се разделят с разстояния. Повече един пример:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://www.psd-tutorials.de/"> </iframe>
iFrames обикновено са насочени към вграждане на външни съдържания. Въпреки това, те могат също да бъдат включени.
<iframe src="http://www.psd-tutorials.de/" width="200" height="150" seamless> </iframe>
Този атрибут е доста интересен. Така, целите на връзката във включения документ – ако не е дефинирано нещо противоположно – се извеждат в прозореца на браузъра, в който е дефиниран iframe елемента. (При нормалното вграждане, връзките – ако няма други дефиниции – се показват в прозореца на iFrame).seamless в момента се поддържа само от Google Canary, друга beta версия на този браузър.
Другият ефект засяга стиловете. Стиловете на включващия файл се прилагат и към включения документ. (При нормалното вграждане, стиловете не се прилагат).
Едно ново атрибут е добавено. С srcdoc може да се дефинира директно съдържанието, което да бъде включено. Вижте следния пример:
<iframe sandbox="allow-same-origin allow-forms allow-scripts"
seamless="seamless" srcdoc="
<script>
top.location.href=" http://www.psd-tutorials.de/"
</script>">
</iframe>В този случай липсва src атрибутът, чрез който обикновено се посочва файла, който трябва да бъде включен.
Съдържанието, посочено чрез srcdoc, се третира така, сякаш произлиза от чужд сървър. Следователно подлежи на правилото за същото произходно място в пълна степен. Това поведение е интересно, например, в контекста на дефиниции на скриптове. Разрешени са всякакви HTML и JavaScript кодове. Обаче, кавичките и символът "И" трябва да бъдат описани с помощта на следните символи " или &.
Тук също може директно да дефинирате страница и по този начин да изведете желаното съдържание.
<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>
Това не е задължително цял HTML файл. Възможно е също и нещо подобно на следното:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc="<p>PSD-Tutorials.de</p>"> </iframe>
В браузъра това изглежда по следния начин:
Това е напълно обичайният HTML синтаксис, без скриптове и така нататък.
Още някои насоки относно атрибутите, които досега са служили за оптичното оформление: неща като scrolling, marginwidth и marginheight вече не са позволени в HTML5. Тези атрибути се заменят с CSS.
