САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

HTML Тег <iframe>



Пример

Встроенный кадр помечается следующим образом:

<iframe src="https://www.schoolsw3.com" title="Schoolsw3 Бесплатные онлайн уроки"></iframe>
Попробуйте сами »

Определение и использование

Тег <iframe> указывает встроенный фрейм.

Встроенный фрейм используется для встраивания другого документа в текущий HTML документ.

Совет: Используйте CSS для стилизации <iframe> (см. пример ниже).

Совет: Это хорошая практика, всегда включать атрибут заголовка для <iframe>. Используется программами чтения с экрана для считывания того, что содержит <iframe>.


Поддержка браузеров

Элемент
<iframe> Да Да Да Да Да

Атрибуты

Атрибут Значение Описание
allow   Определяет особенность политики <iframe>
allowfullscreen true
false
Установите значение true, если <iframe> может активировать полноэкранный режим, вызвав метод requestFullscreen()
allowpaymentrequest true
false
Установите значение true, если кросс-происхождение <iframe> должно быть разрешено вызывать Payment Request API
height pixels Задает высоту <iframe>. Высота по умолчанию составляет 150 пикселей
name text Указывает имя объекта <iframe>
referrerpolicy no-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
same-origin
strict-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.


Еще примеры

Пример

Добавление и удаление границ iframe (с помощью CSS):

<iframe src="/index.php" width="100%" height="300" style="border:1px solid black;">
</iframe>

<iframe src="/index.php" width="100%" height="300" style="border:none;">
</iframe>
Попробуйте сами »

Связные страницы

HTML учебники: HTML Ифреймы

HTML DOM справочник: Объект iframe


Настройки CSS по умолчанию

Большинство браузеров будет отображать элемент <iframe> со следующими значениями по умолчанию:

iframe:focus {
  outline: none;
}

iframe[seamless] {
  display: block;
}