iFrames вже давно є стандартом HTML. У HTML 4.0 вони були включені разом із вже забороненими фреймами в версію 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> можна визначити будь-який вміст. Проте цей вміст відображається виключно в тих браузерах, які не знають елемент iframe.
У HTML5 вводяться нові атрибути для iFrames, які мають головним чином відношення до так званої політики однакового походження.
У браузерах Same Origin Policy гарантує, що вбудовану веб-сторінку під час її відображення не можна змінювати. Ця функція безпеки, безумовно, має сенс. Але вона не завжди є ідеальною. Тому в HTML5 був введений атрибут sandbox, що дозволяє браузерам явно вказати, які дозволи висновлюється для вмісту, вставленого зовнішньою стороною в iFrame.
<iframe sandbox="allow-forms" src="getusercontent.cgi?id=12193"> </iframe>
iFrames з атрибутом sandbox не мають доступу до DOM вбудованої веб-сторінки. Крім того, вони не можуть виконувати скрипти та зберігати файли cookie. Ці обмеження можна зняти за допомогою різних значень пісочниці.
Атрибуту sandbox можна присвоїти різні значення. За допомогою allow-forms вбудована веб-сторінка може отримати інформацію від користувачів через форми. При цьому користувачі не знають, що форма не походить від поточної сторінки.
Якщо ви вкажете allow-same-origin, вбудовану веб-сторінку буде оброблятися так, ніби вона походить з того ж хосту. Цим значенням політика однакового походження буде скасована.
Значення allow-top-navigation дозволяє вбудованому вмісту змінювати вміст верхнього контексту перегляду.
Також є значення allow-script. Це дозволяє веб-сторінці, вбудованої в iframe, містити 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, тобто розробницька версія цього браузера.
Інший ефект стосується таблиць стилів. Стилі таблиць стилів включеного файлу вважаються також для включеного документа. (У звичайному включенні заяви таблиць стилів, в протилежному випадку, не застосовуються).
<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.
