Пример
Встроенный фрейм оформляется следующим образом:
<iframe src="https://www.schoolsw3.com" title="Бесплатные онлайн-уроки по веб-технологиям от W3Schools"></iframe>
Попробуйте сами »
Другие примеры "Попробуйте сами" ниже.
Определение и использование
Тег <iframe> определяет встроенный фрейм.
Встроенный фрейм используется для встраивания другого документа внутрь текущего HTML-документа.
Совет: Используйте CSS для стилизации <iframe> (см. пример ниже).
Совет: Рекомендуется всегда включать атрибут title для <iframe>. Он используется скринридерами для озвучивания содержимого <iframe>.
Поддержка браузерами
| Элемент | |||||
|---|---|---|---|---|---|
| <iframe> | Да | Да | Да | Да | Да |
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| allow | Определяет политику разрешений (feature policy) для <iframe> | |
| allowfullscreen | true false |
Установите true, если <iframe> может активировать полноэкранный режим путем вызова метода requestFullscreen() |
| allowpaymentrequest | true false |
Установите true, если кросс-доменному <iframe> должно быть разрешено использовать Payment Request API |
| height | пиксели | Задает высоту <iframe>. Высота по умолчанию — 150 пикселей |
| loading | eager lazy |
Определяет, должен ли браузер загрузить iframe немедленно или отложить загрузку iframe до выполнения определенных условий |
| name | текст | Задает имя <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_код | Задает HTML-содержимое страницы для отображения в <iframe> |
| width | пиксели | Задает ширину <iframe>. Ширина по умолчанию — 300 пикселей |
Глобальные атрибуты
Тег <iframe> также поддерживает Глобальные атрибуты в HTML.
Атрибуты событий
Тег <iframe> также поддерживает Атрибуты событий в HTML.
Больше примеров
Пример
Добавление и удаление границ iframe (с помощью CSS):
<iframe src="/default.php" width="100%" height="300" style="border:1px solid
black;">
</iframe>
<iframe src="/default.php" width="100%"
height="300" style="border:none;">
</iframe>
Попробуйте сами »
Связанные страницы
Учебник по HTML: HTML Iframes
Справка по HTML DOM: Объект IFrame
Настройки CSS по умолчанию
Большинство браузеров будут отображать элемент <iframe> со следующими значениями по умолчанию:
iframe:focus {
outline: none;
}
iframe[seamless] {
display: block;
}