Як і коли використовувати IFrames

Вбудовані кадри дозволяють включати вміст із зовнішніх джерел на свої сторінки

Вбудовані кадри, які часто називаються "рамками кадрів", - єдиний тип кадру, дозволений у HTML5. Ці кадри по суті є розділом вашої сторінки, який ви "вирізали". У просторі, який ви вирізали зі сторінки, ви можете подавати на зовнішню веб-сторінку. По суті, кадр iframe - це інше вікно браузера, встановлене прямо у вашій веб-сторінці. Ви бачите кодові рамки, які зазвичай використовуються на веб-сайтах, які повинні включати зовнішній вміст, як-от карта Google або відео з YouTube. Обидва популярні веб-сайти використовують вбудовуваний код iframes.

Як використовувати елемент IFRAME

Елемент використовує глобальні елементи HTML5, а також кілька інших елементів. Чотири також є атрибутами в HTML 4.01:

  • - URL-адреса для джерела кадру
  • —Висота вікна
  • —Ширина вікна
  • - ім'я вікна

І три нові HTML5:

  • srcdoc - HTML для джерела кадру. Цей атрибут має перевагу над будь-якою URL-адресою в атрибуті src
  • пісочниця - перелік функцій, які слід дозволити або заборонити у вікні кадру
  • безшовно - повідомляє агенту користувача, що кадр iframe повинен бути наданий так, як він є невидимим частиною батьківського документа

Щоб створити просту рамку iframe, ви встановите вихідну URL-адресу, ширину та висоту:

Зауважте, що ви можете не використовувати значення пікселів для налаштувань iframe, але можете замість цього вирішити використовувати відсоток. Якщо ви будуєте чуйний веб-сайт, розмір якого повинен змінюватися з різними розмірами екрана, ці відсотки будуть важливими.

Також є деякі атрибути, які дійсні в HTML 4.01, але застарілі в HTML5. Оскільки більшість веб-сайтів сьогодні використовують HTML5 +, ці атрибути є тими, які ви не хочете використовувати (але які ви можете бачити в деяких застарілих документах).

  • —Встановіть, використовуйте елемент A для посилання на опис
  • —Встановіть, використовуйте властивість float CSS
  • enabletransparency - натомість використовуйте властивість фонового зображення CSS, щоб зробити ifram прозорим
  • —Вместо використовувати властивість border CSS
  • marginheight - замість цього використовуйте властивість поля CSS
  • marginwidth - замість цього використовуйте властивість поля CSS
  • —Вмісті, використовуйте властивість переповнення CSS

Підтримка браузера IFRAME

The

елемент підтримується всіма сучасними браузерами:

  • Android
  • Хром
  • Firefox
  • Internet Explorer 2+
  • iOS / Safari Mobile
  • Netscape 7+
  • Opera 3+
  • Сафарі

Якщо в наведеному списку не вказано номер версії, це тому, що всі версії цього браузера підтримують його.

Одне, що слід пам’ятати, - це те, що всі браузери підтримують

елемента, все ще обмежена підтримка деяких функцій HTML5.

  • Використання переповнення для вимкнення прокрутки не є надійним. Якщо ви не хочете, щоб панелі прокрутки були у ваших iframes, вам слід продовжувати використовувати атрибут прокрутки.
  • Наразі атрибути srcdoc, пісочниці та безшовних файлів не підтримуються жодними браузерами.

Зв'язок із Іфрам

Коли ви даєте свої рамки if

або

Ви можете вказувати свої посилання на цей кадр з атрибутом на

елемент. Потім, коли користувач натисне на посилання, він відкриється всередині посилається рамки, а не поточного вікна.

Спробуйте самі. Введіть наступне на веб-сторінку:

Якщо документ відкрили в

не має жодної

встановити, тоді всі ці посилання відкриються в тій же рамці, що і

документ.

Ви можете використовувати цю функцію для створення посилань в одному

змінити вміст іншого

на тій же сторінці.

IFrames and Security

The

елемент сам по собі не є ризиком для безпеки для вас чи ваших читачів. На жаль, iframes отримали погану репутацію, оскільки вони можуть використовувати шкідливі веб-сайти, щоб включати вміст, який може заразити комп'ютер відвідувача, не побачивши його на сторінці. Це робиться, якщо посилання вказують на невидиме

і ці сценарії відкладають шкідливий код. Користувач натискає на посилання і вважає, що посилання розірвано, тому що нічого, здавалося, не відбулося, але був створений сценарій там, де вони не могли його побачити.

Також є комп’ютерні віруси, які будуть вводити невидимку

на свої веб-сторінки, фактично перетворюючи свій веб-сайт у ботнет. Вони можуть це зробити через

та інші атаки.

Що слід пам'ятати, включаючи

на вашій веб-сторінці вказано, що ваші користувачі безпечні лише вміст усіх сайтів, на які ви посилаєтесь. Якщо у вас є підстави вважати сайт недостовірним, не посилайтеся на нього жодним чином і, безумовно, не включайте його вміст у

. Однак посилання на власні сторінки в рамках iframes не несе загрози безпеці для вас або ваших користувачів.

Оригінальна стаття Дженніфер Кринін. Відредаговано 7.11.16 р. Джеремі Гірард