<iframe>
- 25 января 2023
Тег <iframe>
означает «встроенный фрейм» и используется для встраивания документов в текущий HTML-документ. Например, с помощью тега можно добавить видео, карты, посты из социальных сетей, рекламу и другой тип внешнего контента.
Синтаксис тега <iframe>
<iframe src="URL"></iframe>
Спецификация HTML
Тег <iframe>
является частью спецификации HTML Living Standard.
Семантический или нет
Тег <iframe>
не считается семантическим, так как не придаёт никакого конкретного значения содержимому.
Примеры использования
Встраивание внешней веб-страницы в HTML-документ:
<iframe src="<https://www.example.com>"></iframe>
Встраивание видео YouTube в HTML-документ:
<div class="embed-container">
<iframe src="<https://www.youtube.com/embed/VIDEO_ID>"></iframe>
</div>
Встраивание карты Google:
<iframe src="<https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!.>..">
Встраивание социальных сетей:
<iframe src="<https://www.facebook.com/plugins/post.php?href=POST_URL>"></iframe>
Встраивание рекламы:
<iframe src="<https://ads.example.com/ad.html>"></iframe>
Встраивание PDF-документа с помощью Google Docs:
<iframe src="<https://docs.google.com/gview?url=PDF_URL>"></iframe>
Для чего использовать тег <iframe>
- Для вставки внешнего контента в HTML-документ.
- Для отображения карты, видео или сообщения в социальных сетях.
- Для встраивания рекламы.
- Для отображения документов PDF или других типов файлов.
Атрибуты тега <iframe>
allowfullscreen
— указывает, разрешать или нет отображение iframe
в полноэкранном режиме.
height
— высота iframe
.
width
— ширина iframe
.
name
— имя iframe
.
sandbox
— включает «песочницу» для содержимого iframe
.
src
— URL документа, который будет отображаться в iframe
.
srcdoc
— HTML-содержимое, которое будет отображаться в iframe
.
Глобальные атрибуты
Тег <iframe>
поддерживает все глобальные атрибуты HTML.
Ограничения
- Содержимое
<iframe>
должно быть из того же домена, что и родительский документ, или сервер должен специально разрешить отображение этого содержимого. - Использование
<iframe>
может замедлить время загрузки страницы.
Нюансы
<iframe>
может использоваться для атакclickjacking
, чтобы обманом заставить пользователя нажать на кнопку или ссылку, выполняющую вредоносное действие.<iframe>
может вызывать проблемы со скринридерами, потому что такие программы не всегда способны прочитать содержимое<iframe>
.
Поддержка браузерами
Тег поддерживается всеми современными браузерами. Актуальная информация — на сaniuse.
Альтернативные теги
Альтернативных тегов для тега <iframe>
не существует.
Чем заменить тег
- Использовать JavaScript для манипулирования DOM и добавления внешнего содержимого на страницу.
- Использовать язык сценариев на стороне сервера, например PHP, для включения внешнего содержимого в страницу.
Актуальность
Тег <iframe>
не устарел, можете использовать его в веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023