Тег <iframe>
Синтаксис
<iframe>...</iframe>
Описание
Тег <iframe> (от англ. inline frame — встроенный фрейм) создаёт встроенный фрейм, который находится внутри обычного документа. Он позволяет загружать в область заданных размеров любые другие документы (веб-страницу, карту, видео и т.д.).
Содержимое внутри тега <iframe> существует независимо от окружающей страницы.
Фреймов на одной веб-странице может быть несколько.
Атрибуты, которые можно использовать в теге <iframe>, указаны ниже. Также тег поддерживает глобальные атрибуты и атрибуты события.
Атрибуты
| Атрибут | Значение | Описание |
| align | left right top bottom middle |
Указывает способ выравнивания и обтекания фрейма текстом. |
| allowfullscreen | allowfullscreen | Определяет, что фрейм может быть открыт в полноэкранном режиме |
| frameborder | 1 0 |
Определяет, показывать рамку вокруг фрейма или нет. Не поддерживается в HTML5 |
| height | px |
Задает высоту фрейма. По умолчанию: высота 150 px |
| longdesc | URL-адрес | Содержит ссылку на подробное описание вложенной во фрейм страницы. Не поддерживается в HTML5 |
| marginheight | px | Определяет верхнюю и нижнюю границы фрейма. Не поддерживается в HTML5 |
| marginwidth | px | Определяет левую и правую границы фрейма. Не поддерживается в HTML5 |
| name | текст | Определяет имя фрейма |
| sandbox | allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation |
Включает дополнительный набор ограничений для содержания в элементе |
| scrolling | yes no auto |
Указывает, отображать или нет полосы прокрутки в элементе. Не поддерживается в HTML5 |
| seamless | seamless |
Определяет, что содержимое вложенного документа должно отображаться как часть родительского документа |
| src | URL-адрес | Определяет адрес документа для встраивания в элемент |
| srcdoc | HTML-код | Указывает HTML-код, который будет показан во фрейме |
| width | px | Определяет ширину элемента |
Пример
HTML-код:
Отображение в браузере:
Параметры CSS по умолчанию
iframe:focus {
outline: none;
}
iframe[seamless] {
display: block;
}
Поддержка браузера
|
Элемент |
Chrome |
Opera |
Firefox |
Safari |
Microsoft Edge |
| <iframe> | Да | Да | Да | Да | Да |