HTML - тег <iframe> создает встроенный фрейм для встраивания стороннего контента (медиа, апплетов и т. д.). Хотя содержимое фрейма и веб-страницы независимы, они могут взаимодействовать посредством JavaScript.
Тег <iframe> - синтаксис и код
Тег <iframe> представлен парами. Содержимое записывается между открывающим (<iframe>) и закрывающим (</iframe>) тегами.
Встроенный фрейм размечается следующим образом:
<iframe src="https://appnet.club" title="AppNet.club"></iframe>
Определение и использование
- HTML - тег
<iframe> указывает встроенный фрейм;
- Встроенный фрейм используется для встраивания другого документа в текущий HTML документ.
✪ Рекомендация: рекомендуется всегда включать атрибут title для <iframe>. Это используется программами чтения с экрана для считывания содержимого <iframe>.
★ Примечание: используйте CSS для оформления <iframe> (см. пример ниже).
Поддержка <iframe> браузерами
 |
✅ Поддерживает |
 |
✅ Поддерживает |
 |
✅ Поддерживает |
 |
✅ Поддерживает |
 |
✅ Поддерживает |
Атрибуты
| Атрибут |
Значение |
Описание |
| allow |
|
Определяет политику функций для <iframe> |
| allowfullscreen |
true
false |
Установите значение true, если <iframe> может активировать полноэкранный режим путем вызова метода requestFullscreen() |
| allowpaymentrequest |
true
false |
Установите значение true, если <iframe> из разных источников должно быть разрешено вызывать API запроса платежа |
| height |
pixels |
Указывает высоту <iframe>. Высота по умолчанию — 150 пикселей |
| loading |
eager
lazy |
Указывает, должен ли браузер загружать iframe немедленно или отложить загрузку iframe до тех пор, пока не будут выполнены некоторые условия |
| name |
text |
Указывает имя <iframe> |
| referrerpolicy |
no-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
same-origin
strict-origin-when-cross-origin
unsafe-url |
Указывает, какую информацию о реферере отправлять при получении iframe |
| sandbox |
allow-forms
allow-pointer-lock
allow-popups
allow-same-origin
allow-scripts
allow-top-navigation |
Включает дополнительный набор ограничений для содержимого в <iframe> |
| src |
URL |
Указывает адрес документа для встраивания в <iframe> |
| srcdoc |
HTML_code |
Указывает HTML-содержимое страницы, отображаемое в <iframe> |
| width |
pixels |
Определяет ширину <iframe>. Ширина по умолчанию — 300 пикселейГлобальные атрибуты |
Глобальные атрибуты
Тег <iframe> также поддерживает глобальные атрибуты в HTML
Атрибуты событий
Тег <iframe> также поддерживает атрибуты событий в HTML
Связанные страницы
Руководство по HTML: HTML iframes
Настройки CSS по умолчанию
Большинство браузеров отображают элемент iframe со следующими значениями по умолчанию:
iframe:focus {
outline: none;
}
iframe[seamless] {
display: block;
}
Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.
