Справочник HTML

Тег <iframe>: безопасное встраивание страницы

<iframe> помещает отдельную веб-страницу внутрь текущей. Такой документ живёт в собственном контексте, но может расходовать ресурсы и запрашивать разрешения, поэтому параметры нужно выбирать осознанно.

Рабочий пример

<iframe
  src="https://example.com/widget"
  title="Интерактивная карта офиса"
  loading="lazy"
  sandbox="allow-scripts"
  width="640"
  height="360">
</iframe>

title объясняет назначение фрейма пользователям скринридера. loading="lazy" откладывает загрузку, а sandbox запрещает возможности, пока они явно не перечислены.

Когда применять

Встраивай только доверенные сервисы и выдавай минимальный набор разрешений. Для адаптивности задай iframe ширину 100%, а соотношение сторон — через aspect-ratio.

Проверь пример самостоятельно: измени исходные данные, убери одну строку и сравни результат. Такой короткий эксперимент помогает увидеть роль каждого свойства или метода и не превращает обучение в механическое копирование.

Частые ошибки

• Оставлять iframe без title
• Копировать широкое значение allow без проверки
• Загружать несколько тяжёлых виджетов сразу