Тег <iframe> встраивает в страницу целый отдельный документ - со своим HTML, своими стилями и своим содержимым, будто окно в другую страницу. Так на сайтах показывают карты, видео с чужих площадок и виджеты, не копируя их код к себе.
В этом уроке
Попробуй поменять width и height - размер встроенного документа справа изменится сразу.
iframe и src
Атрибут src у <iframe> задаёт адрес документа, который нужно встроить, - точно так же, как src у <img> задаёт адрес картинки. Разница в том, что внутри загружается не файл картинки, а целая веб-страница с собственной разметкой. Ещё один важный атрибут - title: он не показывается визуально, но программы чтения с экрана озвучивают его, чтобы объяснить, что именно встроено во фрейм - без title они видят просто безымянный "iframe".
<iframe src="https://example.com/karta" title="Карта с расположением офиса" width="600" height="400"></iframe> - понятно, что это карта, даже без взгляда на экран.
<iframe src="https://example.com/karta"></iframe> - без title программа чтения с экрана объявит только «iframe» без единой подсказки, что внутри.
Атрибут sandbox
Без дополнительных ограничений встроенный во фрейм документ по умолчанию может почти всё: выполнять свои скрипты, открывать всплывающие окна, отправлять формы. Атрибут sandbox ограничивает эти возможности. Пустой sandbox="" блокирует всё сразу; чтобы вернуть что-то конкретное, значения перечисляют через пробел - например, sandbox="allow-scripts" разрешает только скрипты, но не всё остальное.
<iframe src="https://widget.example.com" title="Виджет чата" sandbox="allow-scripts"></iframe> - виджету разрешили ровно то, что нужно для работы, и не больше.
<iframe src="https://widget.example.com" title="Виджет чата"></iframe> - без sandbox чужой виджет получает полный набор возможностей по умолчанию, включая то, что для чата совсем не нужно.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Не указывать title у iframe | Программа чтения с экрана объявляет просто "iframe" без единой подсказки, что внутри | Всегда добавлять короткий описательный title - что именно встроено |
| Встраивать чужой виджет или рекламу без атрибута sandbox | Встроенный документ по умолчанию получает почти полный набор возможностей - скрипты, формы, всплывающие окна | Указывать sandbox и явно разрешать только то, что реально нужно (например, sandbox="allow-scripts") |
| Не задавать width и height у iframe | Место под фрейм не зарезервировано заранее, страница может "прыгнуть" при его загрузке - как и с img без размеров | Указывать width и height (или задавать размер через CSS) |
| Считать iframe устаревшим или "нестандартным" тегом | Это давно официальная часть HTML5, просто с непростой историей появления | Использовать iframe без опасений - с учётом sandbox для чужого контента |
Шпаргалка
| Термин | Значение |
|---|---|
| iframe | Встраивает в страницу отдельный документ целиком |
| src | Адрес встраиваемого документа |
| title | Описание содержимого фрейма для программ чтения с экрана |
| sandbox | Ограничивает возможности встроенного документа; sandbox="" блокирует всё |
| loading="lazy" | Откладывает загрузку iframe, пока он не окажется рядом с видимой областью экрана |
Коротко: отвечаем на вопросы
Что делает пустой атрибут sandbox=""?
Блокирует все возможности встроенного документа сразу: скрипты, отправку форм, всплывающие окна и другие подобные вещи. Чтобы вернуть что-то конкретное, нужные разрешения перечисляют через пробел прямо в значении sandbox, например sandbox="allow-scripts".
Зачем нужен атрибут loading="lazy" у iframe?
Он включает нативную отложенную загрузку: браузер не загружает содержимое фрейма, пока пользователь не долистает страницу почти до него - это экономит трафик и ускоряет первую загрузку страницы, особенно если iframe далеко внизу.
Может ли сайт запретить показывать себя во встроенном iframe на чужой странице?
Да, но не через HTML-атрибут, а через настройку на своём сервере: HTTP-заголовок X-Frame-Options или директиву frame-ancestors в Content-Security-Policy. Так сайты защищаются от показа их страниц в чужом iframe без разрешения.
