HTML-тег <iframe>
Тег <iframe> создает встроенную рамку для встраивания стороннего контента (мультимедиа, апплеты и т. д.). Хотя содержимое рамки и веб-страницы независимы, они могут взаимодействовать через JavaScript.
Синтаксис
Тег <iframe> является обычным HTML-элементом, который требует закрывающего тега.
Пример HTML-тега <iframe>:
Пример HTML-тега <iframe>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe src="https://www.w3docs.com"></iframe>
</body>
</html>Чтобы задать размер iframe, используйте атрибуты height и width, или воспользуйтесь CSS. Значения атрибутов по умолчанию задаются в пикселях, но могут быть указаны в процентах.
Пример HTML-тега <iframe> с атрибутами height и width:
Пример HTML-тега <iframe> с атрибутом height
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe src="https://www.w3docs.com" width="80%" height="300"></iframe>
</body>
</html>Современные браузеры не применяют рамку по умолчанию к iframe. При необходимости вы все равно можете использовать свойство CSS border для стилизации рамки.
Пример HTML-тега <iframe> со свойством CSS border:
Пример HTML-тега <iframe> с атрибутом style
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe src="https://www.w3docs.com" width="80%" height="300" style="border: none"></iframe>
</body>
</html>Новый атрибут loading
В HTML появился новый атрибут loading, который позволяет откладывать загрузку изображений и iframe до тех пор, пока они не окажутся близко к области просмотра. Для этой функции WHATWG подготовил pull request, и она уже является частью Chromium (начиная с версии 76).
Поддерживаемые значения атрибута loading включают:
- "lazy" — откладывает загрузку до тех пор, пока изображение или iframe не окажется на определенном расстоянии от области просмотра.
- "eager" — загружает ресурс немедленно.
Вы можете использовать значение lazy для использования встроенной в браузер отложенной загрузки:
HTML-тег <iframe>
<iframe src="video-player.html" loading="lazy"></iframe>Отложенная загрузка (lazy loading) — это набор методов в веб- и прикладной разработке, которые откладывают загрузку ресурсов на странице до момента их фактического использования, вместо загрузки всех ресурсов сразу. Эти методы помогают улучшить производительность, более эффективно использовать ресурсы устройства и снизить связанные затраты.
Атрибуты
| Attribute | Value | Description |
|---|---|---|
| align | left right top bottom middle | Определяет, как текст выравнивается и обтекает рамку. Не поддерживается в HTML5. |
| allow | string | Определяет политику, разрешающую или ограничивающую определенные функции в iframe. |
| allowfullscreen | Определяет, что рамку можно открыть в полноэкранном режиме. | |
| frameborder | 1 0 | Определяет, отображать ли рамку вокруг iframe. Не поддерживается в HTML5. |
| height | pixels | Определяет высоту рамки (высота по умолчанию 150px). |
| longdesc | URL | Определяет страницу с подробным описанием содержимого. Не поддерживается в HTML5. |
| marginheight | pixels | Определяет верхние и нижние отступы рамки. Не поддерживается в HTML5. |
| marginwidth | pixels | Определяет левые и правые отступы рамки. Не поддерживается в HTML5. |
| name | text | Определяет имя рамки. |
| referrerpolicy | URL | Определяет, какую информацию о referrer отправлять с запросом. |
| sandbox | Добавляет дополнительные ограничения для содержимого внутри рамки. | |
"" – Применяет все ограничения.<br>allow-forms – Разрешает отправку форм или встраиваемых страниц.<br>allow-same-origin – Рассматривает прикрепленный документ как документ, загруженный из того же источника, что и родительский документ.<br>allow-scripts – Включает выполнение скриптов на вложенной странице.<br>allow-top-navigation – Позволяет содержимому прикрепленного документа получать доступ к элементам верхнего уровня (документам, окнам). | ||
| scrolling | yes no auto | Определяет, отображать ли полосу прокрутки или нет. Не поддерживается в HTML5. |
| seamless | seamless | Указывает, что содержимое прикрепленного документа должно отображаться как часть родительского документа. |
| src | URL | Указывает адрес документа, содержимое которого будет загружено в рамку. |
| srcdoc | HTML_code | Хранит содержимое рамки непосредственно в атрибуте. |
| width | pixels | Определяет ширину рамки. (ширина по умолчанию 300px). |
Тег <iframe> поддерживает глобальные атрибуты и атрибуты событий.
Практика
Какие атрибуты имеет HTML-тег iFrame?