Что такое iframe?

<iframe> (встроенный фрейм) — это HTML-элемент, который встраивает другую веб-страницу или документ внутри текущей страницы. Он создает отдельный контекст просмотра в прямоугольной области страницы, позволяя отображать содержимое с другого URL — например карту, видео или виджет третьей стороны — без перехода пользователя на другую страницу.

Iframe часто используются для встраивания видео YouTube, Google Maps, форм оплаты, виджетов социальных сетей и рекламных баннеров. Поскольку встроенное содержимое работает в собственном контексте, атрибуты sandbox и allow позволяют разработчикам строго контролировать, что может делать встроенная страница.

Описание инструмента

Этот инструмент генерирует готовый к использованию HTML-код <iframe> из простой формы. Настройте исходный URL, размеры, поведение прокрутки, стратегию загрузки, разрешения и ограничения песочницы, и инструмент мгновенно выведет соответствующий тег. Не требуется ручное написание атрибутов или запоминание синтаксиса флагов песочницы.

Примеры

Минимальный iframe:

<iframe
  src="https://example.com"
  width="600"
  height="400"
  allowfullscreen
  style="border: none;"
></iframe>

Iframe с отложенной загрузкой и песочницей:

<iframe
  src="https://example.com"
  width="800"
  height="500"
  loading="lazy"
  allowfullscreen
  style="border: none;"
  sandbox="allow-scripts allow-same-origin"
></iframe>

Iframe с разрешениями на доступ к камере и микрофону:

<iframe
  src="https://meet.example.com"
  width="960"
  height="540"
  allowfullscreen
  style="border: none;"
  allow="camera; microphone; display-capture"
></iframe>

Возможности

  • Генерирует валидный код <iframe> из визуальной формы — не требуется знание HTML
  • Полный контроль над разрешениями (allow) и ограничениями песочницы
  • Предпросмотр в реальном времени обновляется при изменении любого параметра

Объяснение параметров

Параметр Описание
URL Атрибут src — адрес встраиваемой страницы
Ширина / Высота Размеры iframe в пикселях
Заголовок Доступная метка (title атрибут) для программ чтения с экрана
Имя Атрибут name, используется как цель ссылки
Прокрутка Управляет полосой прокрутки: автоматически, всегда включена или всегда отключена
Загрузка eager загружает немедленно; lazy откладывает до приближения к области просмотра
Разрешить полноэкранный режим Добавляет allowfullscreen, чтобы встроенное содержимое могло перейти в полноэкранный режим
Граница Если не отмечено, добавляет style="border: none;" для удаления границы по умолчанию
Разрешить функции Предоставляет встроенной странице доступ к определенным разрешениям API браузера
Флаги песочницы Ограничивают возможности встроенной страницы; каждый флаг повторно включает определенную возможность

Советы

  • Всегда указывайте атрибут title для доступности — программы чтения с экрана объявляют его при фокусировке на iframe.
  • Используйте loading="lazy" для iframe ниже линии сгиба, чтобы улучшить производительность загрузки страницы.
  • Добавление атрибута sandbox без флагов полностью блокирует содержимое; добавляйте только те флаги, которые вам действительно нужны.