Пример
Встроенный кадр помечается следующим образом:
<iframe src="https://www.schoolsw3.com" title="Schoolsw3 Бесплатные онлайн уроки"></iframe>
Попробуйте сами »
Определение и использование <iframe>
Тег <iframe> определяет встроенный фрейм.
Встроенный <iframe> используется для встраивания другого документа в текущий HTML документ.
Совет: Используйте CSS для стилизации <iframe> (см. пример ниже).
Совет: Это хорошая практика, всегда включать атрибут заголовка для <iframe>. Используется программами чтения с экрана для считывания того, что содержит <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>
Тег <iframe> также поддерживает Глобальные атрибуты в HTML.
Событие атрибутов <iframe>
Тег <iframe> также поддерживает Событие атрибутов в HTML.
Еще примеры <iframe>
Пример
Добавление и удаление границ 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>
Попробуйте сами »
Связные страницы <iframe>
HTML учебники: HTML Ифреймы
HTML DOM справочник: Объект iframe
Настройки CSS по умолчанию <iframe>
Большинство браузеров будет отображать элемент <iframe> со следующими значениями по умолчанию:
iframe:focus {
outline: none;
}
iframe[seamless] {
display: block;
}