<iframe> - HTML елемент вбудованого фрейму

HTML-елемент <iframe> (або елемент вбудованого фрейму) представляє собою вкладений контекст перегляду, що дозволяє вбудовувати інший HTML-документ на поточну сторінку.

Кожен <iframe> має власну історію сеансу та об'єкт документа, незалежні від батьківського документа. Це означає, що скрипти всередині <iframe> виконуються в окремому контексті, а стилі з батьківської сторінки не застосовуються до вмісту фрейму.

Вміст, розміщений між тегами <iframe> та </iframe>, буде відображатися лише в тому випадку, якщо браузер не підтримує цей елемент.

HTML
<iframe src="URL"></iframe>

Атрибути

Цей тег може мати глобальні атрибути.

allow

Визначає політику функцій для <iframe>. Це дозволяє контролювати, які API та функції браузера доступні для вмісту фрейму (наприклад, camera, microphone, geolocation).

allowfullscreen

Булевий атрибут, який дозволяє вмісту <iframe> переходити в повноекранний режим за допомогою Fullscreen API.

height

Висота фрейму в CSS-пікселях. За замовчуванням — 150.

loading

Вказує, як браузер має завантажувати <iframe>. Можливі значення: eager (завантажувати одразу) та lazy (відкладене завантаження, доки фрейм не наблизиться до видимої області).

name

Ім’я вкладеного контексту перегляду. Може використовуватися як ціль для посилань (атрибут target) або форм.

referrerpolicy

Визначає, яку інформацію про реферера надсилати під час завантаження вмісту фрейму.

sandbox

Застосовує додаткові обмеження до вмісту <iframe> для підвищення безпеки. Можна дозволити певні можливості, додаючи значення, такі як allow-scripts, allow-same-origin, allow-popups.

src

URL-адреса сторінки, яку потрібно вбудувати.

srcdoc

HTML-код сторінки, який потрібно відобразити у фреймі. Якщо цей атрибут вказано, він має пріоритет над атрибутом src.

width

Ширина фрейму в CSS-пікселях. За замовчуванням — 300.

Технічне резюме

Категорія контенту

Потоковий контент, фразовий контент, вбудований контент, інтерактивний контент, відчутний контент.

Дозволений вміст

Нічого, або текстовий вміст для браузерів, що не підтримують <iframe>.

Пропуск тегів

Жоден, початковий та кінцевий теги є обов’язковими.

Дозволені батьківські елементи

Будь-який елемент, що приймає вбудований контент.

Роль ARIA

document, application, none, presentation

DOM інтерфейс

HTMLIFrameElement

Приклади використання

Результат
<iframe src="/html/elements/a/" width="400" height="300">
  <p>Ваш браузер не підтримує iframe.</p>
</iframe>

Стилі за замовчуванням

CSS
iframe {
  border: 2px inset;
}

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

<iframe>
align
allow
allowfullscreen
allowpaymentrequest
browsingtopics
credentialless
cross-origin-top-navigation-by-user-activation
csp
frameborder
height
loading
longdesc
marginheight
marginwidth
name
privateToken
referrerpolicy
sandbox
scrolling
src
srcdoc
width

Останнє оновлення: