<iframe>

Тег <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.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.