iframe что это и как встроить контент на страницу
Элемент iframe встраивает отдельную HTML-страницу внутрь другой страницы. Так на сайте появляются видеоплееры, карты и внешние формы. Браузер загружает встроенный документ отдельно, поэтому ему нужны собственные настройки размеров и безопасности. Разберем рабочие примеры HTML, адаптивный контейнер и ограничения прав встроенного содержимого.
Что такое iframe
iframe – это HTML-элемент, который создает вложенный контекст просмотра. Внутри него браузер показывает другой документ со своей разметкой, стилями и скриптами. CSS родительской страницы оформляет сам прямоугольник фрейма, но не проникает внутрь документа.
Минимальный самостоятельный пример использует srcdoc. Сохраните код в HTML-файл и откройте его браузером.
<!DOCTYPE html>
<html lang="ru">
<meta charset="utf-8">
<title>Пример iframe</title>
<iframe
title="Приветствие"
srcdoc="<p>Это отдельный документ внутри страницы.</p>">
</iframe>
</html>Браузер покажет текст внутри небольшой области с рамкой. Без размеров в атрибутах или CSS область iframe занимает 300×150 CSS-пикселей. Высота не подстраивается автоматически под длину встроенного текста.
Устаревший <frame> делил окно внутри <frameset>. Элемент <iframe> входит в обычную страницу наряду с абзацами и изображениями. Для нового сайта используйте iframe только там, где нужен самостоятельный документ.
Пример iframe в HTML
Разберем пример iframe в HTML с отдельным локальным документом и основными атрибутами.
Создайте рядом два файла: index.html и embed-demo.html. Во втором сохраните простую разметку:
<!DOCTYPE html>
<html lang="ru">
<meta charset="utf-8">
<title>Встроенный документ</title>
<p>Документ успешно загрузился во фрейме.</p>
</html>В файл index.html вставьте следующий код:
<!DOCTYPE html>
<html lang="ru">
<meta charset="utf-8">
<title>Страница с iframe</title>
<style>
.embedded-document {
border: 0;
max-width: 100%;
}
</style>
<iframe
class="embedded-document"
src="embed-demo.html"
width="560"
height="315"
title="Демонстрационный документ"
allow="fullscreen"
allowfullscreen
loading="lazy">
</iframe>
</html>classсвязывает элемент с CSS. Правилоborder: 0убирает рамку.srcзадает адрес встроенного документа. Относительный путь здесь ведет к соседнему файлу.width="560"задает ширину области в CSS-пикселях.height="315"задает ее высоту. Соотношение размеров составляет 16:9.titleобъясняет назначение фрейма пользователю скринридера.allow="fullscreen"разрешает документу запрашивать полноэкранный режим в пределах политики страницы.allowfullscreen– булев атрибут для разрешения полноэкранного режима. Он не отменяет ограничения Permissions Policy родительской страницы.loading="lazy"откладывает загрузку удаленного от видимой области фрейма.
Откройте index.html: внутри появится сообщение из второго файла.
У атрибутов allow и allowfullscreen нет собственного интерфейса. Обычный абзац не превратится в плеер и не получит кнопку развертывания.
Для видео замените src адресом из кода встраивания, предоставленного поставщиком плеера. Обычная ссылка на страницу просмотра может не подходить. Сохраните нужные плееру разрешения из полученного кода.
Как получить код встраивания
Для встраивания нужен HTML-фрагмент, предоставленный сервисом или владельцем контента. Адрес страницы просмотра и адрес встроенного плеера могут различаться. Если готового кода нет, обычная ссылка позволит посетителю открыть оригинал.
Видео из RuTube и VK Видео
Ролик из RuTube или VK Видео можно разместить на странице ссылкой.
- Откройте страницу нужного видео в браузере.
- Скопируйте полный адрес из адресной строки.
- Выделите в редакторе сайта текст «Смотреть видеоинструкцию».
- Примените инструмент добавления ссылки и вставьте скопированный URL в поле адреса.
- Сохраните страницу и нажмите ссылку. Браузер должен открыть выбранный ролик на видеоплощадке.
В HTML-файле используйте элемент <a>. В этом шаблоне замените URL_РОЛИКА скопированным адресом:
<a href="URL_РОЛИКА">Смотреть видеоинструкцию</a>Если поставщик плеера передал HTML-фрагмент для встраивания, вставьте его в HTML-блок редактора. Для iframe добавьте понятный title, например «Видеоинструкция по сборке стола». Не собирайте адрес встроенного плеера по догадке.
Откройте опубликованную страницу и запустите воспроизведение. Затем проверьте полноэкранный режим и отображение на узком экране.
Чтобы отменить размещение, удалите ссылку или HTML-блок с плеером.
Карта из Конструктора Яндекс Карт
Конструктор Яндекс Карт позволяет получить код карты для сайта. В разделе «Код для сайта» доступны варианты JavaScript и iframe. Вариант iframe подходит только для карты со слоем «Схема».
- Откройте в конструкторе карту, которую хотите разместить на сайте.
- Выберите слой «Схема», чтобы использовать вариант iframe.
- Откройте раздел «Код для сайта».
- Выберите вариант iframe.
- Увеличьте масштаб карты, если конструктор показывает сообщение «Чтобы получить код, увеличьте масштаб». После увеличения появится код встраивания.
- Скопируйте полученный фрагмент в HTML-блок страницы с контактами.
Фрагмент iframe загружает карту как отдельный документ внутри страницы.
Добавьте title="Карта проезда к офису" и задайте размеры через CSS. Фрагмент с <script> подключает карту другим способом. Не переносите адрес скрипта в src фрейма: браузер ожидает там документ.
После публикации проверьте адрес метки и масштаб карты. При сужении окна карта должна оставаться внутри колонки.
Вместо встроенной карты можно разместить обычную ссылку. Откройте карту по адресу, предоставленному ее владельцем, и скопируйте URL из адресной строки. Вставьте его в href вместо URL_КАРТЫ:
<a href="URL_КАРТЫ">Открыть карту проезда</a>Откройте опубликованную страницу и нажмите ссылку: должна появиться нужная карта.
Удаление ссылки или добавленного HTML-блока отменяет размещение.
Атрибуты iframe
Основные атрибуты управляют источником документа, размерами, доступностью и разрешениями. Справочник элемента iframe на MDN описывает их синтаксис и поведение.
| Атрибут | Значения | Что делает |
|---|---|---|
src | Абсолютный или относительный URL | Загружает документ по указанному адресу. |
srcdoc | HTML-строка | Создает документ из строки. При наличии одновременно с src получает приоритет. |
name | Имя контекста, например preview | Позволяет направить ссылку или отправку формы во фрейм через target. |
width | Целое неотрицательное число | Задает ширину в CSS-пикселях. Для процентов используйте CSS. |
height | Целое неотрицательное число | Задает высоту в CSS-пикселях. |
title | Краткое описание содержимого | Дает фрейму доступное название для скринридеров. |
allow | Директивы через точку с запятой | Задает разрешения функций через Permissions Policy. |
allowfullscreen | Булев атрибут | Разрешает запрос полноэкранного режима с учетом остальных политик. |
loading | eager, lazy | Выбирает обычную или отложенную загрузку. Значение по умолчанию – eager. |
referrerpolicy | Например, no-referrer, origin, strict-origin-when-cross-origin | Определяет передачу заголовка Referer при загрузке документа. |
sandbox | Пустая строка или токены через пробел | Ограничивает возможности документа; токены снимают отдельные ограничения. |
Добавляйте содержательный title каждому iframe.
Скринридер использует его, чтобы обозначить назначение области. Текст «Фрейм» почти ничего не объясняет; «Форма записи на консультацию» помогает выбрать нужный блок.
Как связаны name и target
Ссылка открывает документ во фрейме, если ее target совпадает с его name. Атрибут id для такого связывания не подходит.
<a href="embed-demo.html" target="preview">Открыть документ</a>
<iframe
name="preview"
title="Предпросмотр документа"
srcdoc="<p>Нажмите ссылку для загрузки документа.</p>">
</iframe>После нажатия ссылка загрузит файл embed-demo.html в существующую область. Весь сайт на такие независимые панели разбивать не стоит.
Какие устаревшие атрибуты заменить
В новых примерах задавайте оформление через CSS, учитывая границы встроенного документа.
frameborderзамените свойствомborderу iframe.scrollingзамените настройкамиoverflowвнутри встроенного документа, если вы его контролируете. CSS родителя не управляет прокруткой чужой страницы.alignзамените раскладкой Flexbox, Grid или свойствомvertical-alignдля строчного размещения.marginwidthиmarginheightзамените отступамиmarginилиpaddingвнутри встроенного документа. Отступ самого iframe снаружи решает другую задачу.longdescзамените обычной доступной ссылкой на подробное описание рядом с фреймом. CSS не заменяет смысл этого атрибута.
Адаптивный iframe
Для видео задайте ширину 100% и соотношение сторон 16:9. Свойство aspect-ratio вычислит высоту по доступной ширине. Сохраненные HTML-размеры перестанут фиксировать область благодаря CSS.
<style>
.responsive-frame {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
border: 0;
}
</style>
<iframe
class="responsive-frame"
src="embed-demo.html"
width="560"
height="315"
title="Адаптивный встроенный документ"
loading="lazy">
</iframe>Сужайте окно браузера: фрейм должен уменьшаться без горизонтальной прокрутки страницы. При ширине 320 пикселей его высота составит 180 пикселей.
Это меняет размер области, но не исправляет неадаптивную верстку внутри нее.
Запасной вариант с padding
Для браузеров без поддержки aspect-ratio используйте обертку с процентным отступом. Значение 56.25% соответствует пропорции 16:9.
<style>
.frame-wrapper {
position: relative;
height: 0;
padding-top: 56.25%;
}
.frame-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>
<div class="frame-wrapper">
<iframe
src="embed-demo.html"
title="Документ в адаптивной обертке"
loading="lazy">
</iframe>
</div>Для карты или длинной формы пропорция 16:9 подходит не всегда. Задайте подходящую высоту в CSS и сохраните ширину 100%. Автоматическую высоту по содержимому чужого документа получают только при его участии, например через сообщения.
Безопасность iframe
Внешний документ запускает собственные скрипты и загружает дополнительные ресурсы. Выбирайте доверенный источник и оставляйте только нужные ему возможности. Атрибуты iframe дополняют защиту браузера, но не превращают неизвестный сервис в безопасный.
Как ограничить документ через sandbox
Пустой атрибут sandbox включает набор ограничений, в том числе запрет скриптов и отправки форм. Браузер также назначает документу непрозрачный origin. Добавляйте токены по одному, исходя из функций виджета.
| Токен | Какое ограничение снимает |
|---|---|
allow-scripts | Разрешает выполнение JavaScript. |
allow-forms | Разрешает отправку форм. |
allow-popups | Разрешает открытие новых окон и вкладок. |
allow-popups-to-escape-sandbox | Позволяет открытым окнам не наследовать ограничения sandbox. |
allow-same-origin | Сохраняет исходный origin документа вместо непрозрачного. |
allow-downloads | Разрешает загрузки файлов в рамках остальных правил браузера. |
allow-modals | Разрешает модальные диалоги, например alert(). |
allow-pointer-lock | Разрешает использование Pointer Lock API. |
allow-presentation | Разрешает запуск сеанса Presentation API. |
allow-top-navigation-by-user-activation | Разрешает навигацию верхней страницы после действия пользователя. |
allow-top-navigation | Снимает ограничение навигации верхней страницы без требования пользовательской активации. |
Не сочетайте allow-scripts и allow-same-origin для недоверенного документа того же origin.
Такая комбинация позволяет встроенному коду устранить ограничения sandbox. Для изоляции недоверенного содержимого используйте отдельный origin и минимальные разрешения.
Токен allow-same-origin не делает чужой сайт вашим origin. Он сохраняет происхождение встроенного документа. Origin включает схему, имя хоста и порт.
Как ограничить доступ к устройствам
Атрибут allow управляет отдельными функциями через Permissions Policy. Он не заменяет sandbox. Например, эта запись запрещает доступ к камере, микрофону и геолокации:
allow="camera 'none'; microphone 'none'; geolocation 'none'"Для видеоплеера добавляют fullscreen, если нужен полноэкранный режим. Разрешение в iframe не отменяет более строгую политику родительского документа. Доступ к устройствам также зависит от защищенного контекста и решения пользователя.
Пример ограниченного встраивания формы
Форме без JavaScript достаточно разрешить отправку данных. Шаблон использует относительный адрес: замените его адресом формы, которую поставщик разрешает встраивать.
<style>
.request-form {
width: 100%;
height: 600px;
border: 0;
}
</style>
<iframe
class="request-form"
src="/forms/request.html"
title="Форма заявки на консультацию"
sandbox="allow-forms"
allow="camera 'none'; microphone 'none'; geolocation 'none'"
referrerpolicy="no-referrer"
loading="lazy">
</iframe>Политика no-referrer убирает Referer из запроса загрузки фрейма.
Она не скрывает IP-адрес посетителя и не запрещает передачу введенных данных. Отправьте пробную заявку и проверьте появление подтверждения внутри формы.
Если форма требует скриптов, добавляйте allow-scripts только после оценки источника. Отсутствие allow-same-origin может мешать авторизации и запросам сервиса; не снимайте изоляцию автоматически.
Чтобы отменить интеграцию, удалите iframe. Изменения разрешений проверяйте на новой загрузке страницы.
Как запретить показ своего сайта во iframe
Кликджекинг заставляет посетителя нажимать элементы сайта внутри чужой страницы. Сервер может запретить такое встраивание заголовком Content-Security-Policy с директивой frame-ancestors.
frame-ancestors 'none'запрещает любое встраивание.frame-ancestors 'self'разрешает встраивание страницами того же origin.
Директива проверяет всю цепочку родительских документов. Она не работает через HTML-тег meta: настройте именно HTTP-заголовок ответа. Директива frame-src решает другую задачу – ограничивает источники фреймов на вашей странице.
Для старых браузеров добавьте X-Frame-Options. Значение DENY запрещает встраивание, а SAMEORIGIN разрешает его только внутри того же origin. Используйте согласованные значения двух заголовков.
Синтаксис директив описан в документации MDN для frame-ancestors и X-Frame-Options.
Настройка nginx
Перед изменением сохраните копию конфигурации сайта. Для полного запрета добавьте в обслуживающий сайт блок server:
add_header Content-Security-Policy "frame-ancestors 'none'" always;
add_header X-Frame-Options "DENY" always;Если CSP уже настроена, добавьте frame-ancestors в существующую политику. Не заменяйте ее целиком: другие директивы могут защищать загрузку скриптов и ресурсов.
Проверьте синтаксис командой nginx -t. После успешной проверки примените конфигурацию командой nginx -s reload с правами администратора. Учитывайте отдельные настройки add_header во вложенных блоках: они могут менять наследование заголовков.
Настройка Apache
При подключенном модуле mod_headers добавьте в конфигурацию виртуального хоста:
Header always set Content-Security-Policy "frame-ancestors 'none'"
Header always set X-Frame-Options "DENY"Файл .htaccess также подойдет, если сервер разрешает соответствующие директивы. После изменения конфигурации виртуального хоста проверьте ее командой apachectl configtest. При успешной проверке примените изменения командой apachectl graceful с правами администратора.
Чтобы разрешить собственное встраивание, замените 'none' на 'self', а DENY на SAMEORIGIN.
Если настройка вызвала проблемы, восстановите сохраненную конфигурацию и примените ее повторно.
Как проверить запрет и найти причину ошибки
Откройте инструменты разработчика браузера и панель сетевых запросов. Перезагрузите страницу, выберите запрос HTML-документа и посмотрите заголовки ответа. Там должны появиться выбранные CSP и X-Frame-Options.
Для проверки полного запрета попробуйте встроить собственную страницу в тестовый iframe. Браузер заблокирует документ и покажет сообщение в консоли. Для режима 'self' проверяйте вставку с другого origin.
Так же диагностируют чужую страницу, которая не открывается во фрейме. Сообщение об отказе из-за X-Frame-Options или frame-ancestors означает запрет со стороны источника.
Атрибуты iframe этот запрет не отменяют; используйте предоставленный источником код встраивания либо обычную ссылку.
Связь страницы и iframe
Политика same-origin ограничивает чтение DOM чужого документа через contentWindow. Родитель получает ссылку на окно, но не произвольный доступ к его содержимому. Для согласованного обмена используйте window.postMessage().
Создайте два файла в одной папке. Пример передает команду из родителя и возвращает подтверждение из фрейма. Оба обработчика проверяют происхождение сообщения, отправителя и формат данных.
Файл parent.html:
<!DOCTYPE html>
<html lang="ru">
<meta charset="utf-8">
<title>Родительская страница</title>
<iframe id="widget" src="child.html" title="Тестовый виджет"></iframe>
<p id="status">Ожидаем ответ</p>
<script>
const frame = document.getElementById('widget');
const widgetOrigin = location.origin;
window.addEventListener('message', (event) => {
if (event.origin !== widgetOrigin) return;
if (event.source !== frame.contentWindow) return;
if (!event.data || typeof event.data !== 'object') return;
if (event.data.type !== 'widget:ready') return;
document.getElementById('status').textContent = 'Связь установлена';
});
frame.addEventListener('load', () => {
frame.contentWindow.postMessage(
{ type: 'widget:init' },
widgetOrigin
);
});
</script>
</html>Файл child.html:
<!DOCTYPE html>
<html lang="ru">
<meta charset="utf-8">
<title>Тестовый виджет</title>
<p>Виджет загружен</p>
<script>
const parentOrigin = location.origin;
window.addEventListener('message', (event) => {
if (event.origin !== parentOrigin) return;
if (event.source !== window.parent) return;
if (!event.data || typeof event.data !== 'object') return;
if (event.data.type !== 'widget:init') return;
window.parent.postMessage(
{ type: 'widget:ready' },
parentOrigin
);
});
</script>
</html>Откройте файлы через локальный HTTP-сервер. Например, при установленном Python 3 выполните в папке файлов python -m http.server 8000. Откройте в браузере адрес http://localhost:8000/parent.html: сообщение сменится на «Связь установлена».
Для разных сайтов укажите в каждом файле точный ожидаемый origin другой стороны вместо location.origin.
Не используйте * для передачи чувствительных данных. Origin сравнивайте целиком, включая схему и порт, без поиска подстроки.
Пример не использует sandbox. У фрейма с непрозрачным origin проверка по ожидаемому адресу не пройдет. Не принимайте сообщения с origin null как доверенные только ради исправления этой ошибки.
Если сообщение содержит текст, выводите его через textContent. Проверяйте типы и допустимые значения каждого поля. Чтобы закончить локальную проверку, остановите сервер сочетанием Ctrl+C.
Когда iframe лучше не использовать
- Для макета сайта. Шапку, меню и основной текст собирайте средствами HTML и CSS: независимые документы усложняют навигацию и доступность.
- Для основного текста статьи. Важный для поиска контент размещайте прямо в HTML страницы; содержимое iframe остается отдельным документом.
- Для простой картинки или собственного видеофайла. Элементы
<img>и<video>не требуют отдельной HTML-страницы. - Для множества тяжелых виджетов одновременно. Каждый iframe может загружать собственные скрипты, стили и сетевые соединения.
Видеоплеер или карту подключайте через код встраивания, предоставленный источником. Собственную форму обычно проще разместить прямо на странице. Для независимого внешнего приложения используйте iframe с ограниченными правами и согласованным обменом сообщениями.
Атрибут loading="lazy" уменьшает конкуренцию за ресурсы при начальной загрузке, если фрейм находится далеко от видимой области. Он не уменьшает вес самого виджета и не гарантирует точный момент загрузки.
Совет от нашей редакции: перед публикацией проверьте вставку на узком экране и выполните основное действие посетителя. Плеер должен воспроизводить ролик, карта – показывать нужное место, форма – отправлять заявку.
Популярное за неделю
- Как создать сайт самому в 2026: 4 способа + пошаговая инструкция 34 мин чтения
- Лучшие конструкторы для создания сайтов — плюсы, минусы и сравнения 22 мин чтения
- Форма авторизации на HTML и CSS: код входа и регистрации 8 мин чтения
- Как сделать отступ в HTML: табуляция и margin 3 мин чтения
- Как посмотреть исходный HTML-код страницы в браузере 4 мин чтения
- Как редактировать html файл в Chrome 1 мин чтения
Комментарии
И какой же это стиль надо использовать вместо нереализованного ни в одном браузере атрибута longdesc??
Во фрейме не тормозит анимация управляемая JS