Встроенный фрейм HTML iframe - подробное руководство для разработчиков

Главная

База знаний

html

Встраиваемый контент

Встроенный фрейм HTML iframe - полное практическое руководство

26 ноября 2025

Автор

Олег Марков

Введение

Элемент iframe в HTML позволяет встраивать одну веб‑страницу внутрь другой. По сути, это «окно», через которое вы показываете внешний или внутренний ресурс: видео с YouTube, карту, платежную форму, административную панель или любой другой сайт.

Смотрите, я покажу вам, как это работает в самом простом виде:

<!-- Встраиваем страницу https://example.com внутрь текущей -->
<iframe src="https://example.com" width="600" height="400"></iframe>

Как только браузер видит iframe, он загружает указанный ресурс как отдельный документ, но отображает его внутри текущей страницы. Важно понимать, что это фактически отдельный контекст: у него свой DOM, свой JavaScript и свои куки (в рамках того же домена).

В этой статье вы увидите:

как правильно использовать iframe и его основные атрибуты;
как настраивать размеры, адаптивность и стили;
как обрабатывать события загрузки и взаимодействовать через JavaScript;
как настраивать безопасность через sandbox, referrerpolicy, CSP;
когда iframe уместен, а когда лучше использовать другие подходы (API, компоненты, SSR).

Давайте по шагам разберем, как устроен iframe и что вы реально можете с ним сделать.

Основы элемента iframe

Базовый синтаксис

Начнем с классического примера. Здесь я размещаю пример, чтобы вам было проще понять базовую структуру:

<!-- Простейший iframe с фиксированными размерами -->
<iframe
  src="https://example.com"      <!-- URL встроенной страницы -->
  width="800"                    <!-- Ширина области iframe в пикселях -->
  height="600"                   <!-- Высота области iframe в пикселях -->
  title="Демонстрационная страница"> <!-- Описание для доступности -->
</iframe>

Разберем ключевые моменты:

src — обязательный в реальном использовании атрибут, указывает URL ресурса;
width и height — размеры области отображения в CSS‑пикселях;
title — важен для доступности, особенно для пользователей скринридеров.

Сам элемент по умолчанию ведет себя как inline-block. Вы можете управлять его отображением через CSS: задать display, рамки, тени, округление углов и т. д.

Встроенный контент и независимый контекст

Важно понять концепцию контекста:

iframe создает отдельный документ;
JS внутри iframe не «видит» родительский DOM, если страница с другого домена (политика одинакового источника);
события, стили и скрипты не «протекают» между документами автоматически.

Это удобно, когда вы хотите изолировать:

сторонний функционал (виджет оплаты, форма, чат);
административный интерфейс;
старый или унаследованный фронтенд.

Но именно эта изоляция усложняет взаимодействие между родителем и iframe, о чем мы поговорим дальше.

Основные атрибуты iframe

src и srcdoc

src

src — главный атрибут, задающий URL встроенного документа:

<iframe src="https://maps.google.com" title="Карта"></iframe>

Если не указать src, браузер все равно создаст пустой документ внутри iframe, но он будет «about:blank». Иногда это используют, чтобы сначала создать iframe, а затем задать ему src динамически через JS.

srcdoc

srcdoc позволяет встроить HTML код напрямую в атрибут, без отдельного файла:

<iframe
  title="Пример с srcdoc"
  srcdoc="
    <!doctype html>
    <html>
      <head>
        <meta charset='utf-8'>
        <style>
          body { font-family: sans-serif; margin: 0; padding: 10px; }
        </style>
      </head>
      <body>
        <h1>Контент из srcdoc</h1>
        <p>Этот HTML встроен прямо в атрибут srcdoc.</p>
      </body>
    </html>
  ">
</iframe>

Обратите внимание:

содержимое srcdoc — это полноценный HTML‑документ;
если указаны и src, и srcdoc, приоритет имеет srcdoc;
вам нужно аккуратно экранировать кавычки, чтобы не «сломать» атрибут;
такой подход удобен, когда вы хотите генерировать независимый мини‑документ на лету.

width и height

width и height задают размеры iframe. Давайте разберемся на примере:

<!-- Фиксированные размеры -->
<iframe
  src="https://example.com"
  width="600"       <!-- ширина 600px -->
  height="400"      <!-- высота 400px -->
  title="Фиксированный iframe">
</iframe>

Но на практике жестко фиксировать размеры не всегда удобно, особенно на мобильных устройствах. Чаще вы будете использовать комбинацию HTML‑атрибутов и CSS.

Например, вы задаете базовый размер в HTML, но на малых экранах переопределяете его через CSS:

<iframe
  src="https://example.com"
  width="800"
  height="450"
  class="video-frame"
  title="Видео">
</iframe>

/* Базовый размер для десктопа */
.video-frame {
  max-width: 100%;  /* не вылезает за пределы контейнера */
}

/* На маленьких экранах переопределяем высоту */
@media (max-width: 600px) {
  .video-frame {
    height: 250px;  /* уменьшаем высоту на мобильных */
  }
}

name

name задает имя фрейма, по которому можно к нему обращаться из ссылок или скриптов:

<!-- Определяем именованный iframe -->
<iframe
  src="about:blank"
  name="contentFrame"
  title="Фрейм с контентом">
</iframe>

<!-- Ссылка, открывающаяся внутри iframe -->
<a href="page.html" target="contentFrame">Открыть страницу в iframe</a>

Здесь важно:

значение target в ссылке должно совпадать с name iframe;
так можно организовать простую навигацию внутри блока страницы без перезагрузки всего документа.

title

title — часто забываемый, но критичный для доступности атрибут. Он нужен для:

пользователей скринридеров;
случаев, когда контент не может быть загружен.

Пример:

<iframe
  src="https://www.youtube.com/embed/ID"
  title="Видео о работе элемента iframe в HTML">
</iframe>

Старайтесь описывать, что внутри фрейма, а не просто писать «iframe».

frameborder, scrolling и устаревшие атрибуты

Ранее часто использовали:

frameborder="0" — убрать рамку;
scrolling="no" — отключить полосы прокрутки.

Сейчас они считаются устаревшими. Лучше делать это через CSS:

<iframe
  src="https://example.com"
  class="no-border"
  title="Фрейм без рамки">
</iframe>

.no-border {
  border: none;        /* убираем рамку */
  overflow: hidden;    /* скрываем полосы прокрутки содержимого */
}

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

Современные атрибуты и безопасность

sandbox

sandbox — один из ключевых атрибутов для безопасности. Он включает «песочницу» и жестко ограничивает возможности страницы внутри iframe.

Без параметров:

<iframe
  src="https://example.com"
  sandbox
  title="Песочница по умолчанию">
</iframe>

В этом режиме по умолчанию запрещено очень многое:

выполнение скриптов;
открытие всплывающих окон;
навигация верхнего окна;
запуск плагинов и многое другое.

Чтобы частично снять ограничения, вы добавляете разрешения через пробел:

<iframe
  src="https://example.com"
  sandbox="allow-scripts allow-same-origin"
  title="Ограниченный iframe">
</iframe>

Распространенные флаги:

allow-scripts — разрешает выполнение JS;
allow-same-origin — считает содержимое из того же источника, что и родитель;
allow-forms — разрешает отправку форм;
allow-popups — разрешает открывать всплывающие окна;
allow-top-navigation / allow-top-navigation-by-user-activation — навигация верхнего окна (полная или только по явному действию пользователя);
allow-popups-to-escape-sandbox — всплывающие окна без ограничений песочницы.

Покажу вам, как это реализовано на практике для встраивания виджета оплаты:

<iframe
  src="https://pay.example.com/widget"
  sandbox="allow-forms allow-scripts allow-same-origin"
  referrerpolicy="origin"
  title="Платежная форма">
</iframe>

Здесь:

мы разрешаем формы и скрипты, иначе виджет не заработает;
allow-same-origin нужен, если скриптам виджета нужно понимать свой домен;
при этом iframe все еще не может, к примеру, перенаправить верхнее окно.

allow и управление возможностями

Атрибут allow управляет конкретными API браузера:

<iframe
  src="https://example.com/call"
  allow="camera; microphone"
  title="Видео‑звонок">
</iframe>

Примеры параметров:

camera — доступ к камере;
microphone — доступ к микрофону;
geolocation — геолокация;
fullscreen — переход в полноэкранный режим;
clipboard-read, clipboard-write — буфер обмена.

Давайте посмотрим, что происходит в следующем примере:

<!-- Встраиваем видео с возможностью полноэкранного режима -->
<iframe
  src="https://www.youtube.com/embed/ID"
  allow="fullscreen; picture-in-picture"
  title="Видео с YouTube">
</iframe>

Без allow="fullscreen" кнопка полноэкранного режима может не работать.

referrerpolicy

referrerpolicy управляет тем, какой заголовок Referer будет отправлен при загрузке iframe.

Пример:

<iframe
  src="https://external.example.com/widget"
  referrerpolicy="no-referrer-when-downgrade"
  title="Внешний виджет">
</iframe>

loading

loading управляет ленивой загрузкой:

<iframe
  src="https://maps.google.com"
  loading="lazy"
  title="Карта с ленивой загрузкой">
</iframe>

Значения:

lazy — загрузка откладывается, пока iframe не приблизится к видимой области;
eager — загружать сразу;
auto — предоставить решение браузеру.

Используйте loading="lazy" для «тяжелых» виджетов (карты, видео), находящихся ниже первого экрана — это ускорит начальную загрузку страницы.

Адаптивные iframe и управление размерами

Процентная ширина

Самый простой способ сделать iframe гибким по ширине:

<iframe
  src="https://example.com"
  style="width: 100%; height: 400px; border: 0;"
  title="Адаптивная ширина">
</iframe>

Здесь width: 100% заставляет iframe растягиваться по ширине родительского контейнера.

Сохранение пропорций (под видео, карты)

Для видео и карт обычно нужно сохранить соотношение сторон (например, 16:9). Вот классический прием:

<div class="iframe-wrapper">
  <iframe
    src="https://www.youtube.com/embed/ID"
    title="Видео 16 к 9"
    allow="fullscreen"
    loading="lazy">
  </iframe>
</div>

.iframe-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 9 / 16 * 100 - высота 56,25% от ширины */
  height: 0;              /* высота контейнера определяется через padding-bottom */
  overflow: hidden;
}

.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;    /* iframe заполняет контейнер по ширине */
  height: 100%;   /* и по высоте */
  border: 0;      /* убираем рамку */
}

Как видите, этот код выполняет сразу две задачи:

Контейнер устанавливает нужное соотношение сторон за счет padding-bottom.
iframe растягивается внутри, подстраиваясь под эти пропорции.

Высота по содержимому: почему это сложно

Частый вопрос: «Как сделать, чтобы высота iframe автоматически подстраивалась под высоту содержимого?»

Сценарий зависит от домена:

Если содержимое с того же домена

Вы можете измерить высоту документа внутри iframe и выставить ее родительскому элементу:

<!-- Родительская страница -->
<iframe
  id="internalFrame"
  src="/inner-page.html"
  style="width: 100%; border: 0;"
  title="Внутренняя страница">
</iframe>

<script>
// Ждем загрузки iframe
document.getElementById('internalFrame').addEventListener('load', function () {
  // Здесь мы получаем доступ к документу внутри iframe
  var iframe = this;
  var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

  // Вычисляем высоту контента
  var height = innerDoc.documentElement.scrollHeight;

  // Устанавливаем высоту iframe под содержимое
  iframe.style.height = height + 'px';
});
</script>

Комментарии внутри кода помогают увидеть, как это работает:

мы ждем события load;
затем измеряем реальную высоту документа;
и подгоняем высоту iframe.

Если содержимое с другого домена

Здесь прямой доступ к contentDocument запрещен политикой одинакового источника. Высоту приходится узнавать через postMessage, если владелец внешнего ресурса это поддерживает. Мы еще вернемся к этому при разборе взаимодействия между окнами.

Взаимодействие через JavaScript

Доступ к содержимому iframe с того же домена

Если iframe загружает страницу того же домена, что и родитель, вы можете работать с DOM внутри фрейма:

<iframe
  id="infoFrame"
  src="/info.html"
  title="Информация">
</iframe>

<script>
// Получаем ссылку на iframe
var frame = document.getElementById('infoFrame');

// Ждем, когда он загрузится
frame.addEventListener('load', function () {
  // Здесь мы создаем переменную doc с документом внутри iframe
  var doc = frame.contentDocument || frame.contentWindow.document;

  // Находим элемент внутри iframe и меняем его текст
  var heading = doc.querySelector('h1');
  if (heading) {
    heading.textContent = 'Заголовок изменен из родительского окна';
  }
});
</script>

Обратите внимание:

все это работает только при одинаковом происхождении (протокол, домен, порт);
если домены различаются, попытка доступа выбросит ошибку безопасности.

Доступ к родительскому окну из iframe

Внутри iframe вы можете обратиться к родителю через window.parent:

<!-- Внутри документа, загруженного в iframe -->
<button id="sendBtn">Сообщить родителю</button>

<script>
document.getElementById('sendBtn').addEventListener('click', function () {
  // Здесь мы вызываем функцию родителя, если она существует
  if (window.parent && typeof window.parent.onChildMessage === 'function') {
    window.parent.onChildMessage('Кнопка внутри iframe была нажата');
  }
});
</script>

На родительской странице:

<script>
// Функция, доступная для iframe
function onChildMessage(message) {
  // Выводим сообщение из iframe
  console.log('Сообщение из iframe -', message);
}
</script>

Такой подход снова возможен только при одинаковом домене или при снятых ограничениях одинакового источника (что делать небезопасно).

Безопасное взаимодействие между доменами через postMessage

Когда домены различаются, правильный способ общения — window.postMessage.

Отправка сообщения из iframe родителю

Внутри iframe:

<script>
// Отправляем сообщение родительскому окну
function notifyParent() {
  // Здесь мы формируем данные для отправки
  var data = {
    type: 'resize',
    height: document.documentElement.scrollHeight
  };

  // Отправляем объект данных
  window.parent.postMessage(data, '*'); // '*' для примера - в реальности лучше указать конкретный origin
}

window.addEventListener('load', notifyParent);
window.addEventListener('resize', notifyParent);
</script>

Комментарии:

мы считаем высоту документа и отправляем ее наружу;
здесь '*' означает «любому получателю», но в боевом коде лучше указать точный origin родителя.

Обработка сообщений в родительском окне

На родительской странице:

<iframe
  id="externalFrame"
  src="https://widget.example.com/embed"
  style="width: 100%; border: 0;"
  title="Внешний виджет">
</iframe>

<script>
var frame = document.getElementById('externalFrame');

window.addEventListener('message', function (event) {
  // Проверяем источник сообщения для безопасности
  if (event.origin !== 'https://widget.example.com') {
    return; // Игнорируем сообщения с других доменов
  }

  // Здесь мы получаем объект данных от iframe
  var data = event.data;

  if (data && data.type === 'resize' && typeof data.height === 'number') {
    // Меняем высоту iframe в соответствии с данными
    frame.style.height = data.height + 'px';
  }
});
</script>

Здесь:

мы слушаем события message у window;
проверяем event.origin, чтобы не обрабатывать сообщения от неизвестных источников;
получаем данные и меняем высоту iframe.

Так обычно реализуют «автоматическую высоту» для встраиваемых виджетов.

Сценарии использования iframe

Встраивание видео

Самый распространенный пример — видео с YouTube или других платформ. Давайте разберемся на примере:

<div class="video-wrapper">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="Название видео"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
    loading="lazy">
  </iframe>
</div>

.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

Здесь мы:

делаем видео адаптивным;
разрешаем нужные возможности через allow;
включаем ленивую загрузку.

Встраивание карт

Многие картографические сервисы предлагают embed‑код на основе iframe:

<iframe
  src="https://www.google.com/maps/embed?pb=..."
  width="600"
  height="450"
  style="border:0;"
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
  title="Карта офиса">
</iframe>

Часто достаточно взять готовый код и немного адаптировать под свой макет (проценты по ширине, адаптивное соотношение сторон).

Встраивание виджетов и форм

Виджеты оплаты, виджеты входа соцсетей, онлайн‑чаты — все они часто поставляются именно как iframe, чтобы изолировать сторонний код.

Пример платежного виджета:

<iframe
  src="https://secure.payments.com/widget?public_key=..."
  sandbox="allow-forms allow-scripts allow-same-origin"
  referrerpolicy="origin"
  style="width: 100%; height: 500px; border: 0;"
  title="Платежная форма">
</iframe>

Такая изоляция полезна:

сторонний JS не ломает ваш сайт;
платежная система не раскрывает свои внутренности;
вы не храните у себя чувствительные данные карт.

Встраивание внутренних админ‑панелей

Иногда удобно использовать iframe для админских разделов или встроенных приложений:

у вас есть отдельное приложение с собственной авторизацией;
вы встраиваете его в общий портал через iframe;
таким образом сохраняете независимые релизы и стек технологий.

Внутренний сценарий:

<iframe
  src="https://admin.internal.local/dashboard"
  style="width: 100%; height: 100vh; border: 0;"
  title="Административная панель">
</iframe>

Здесь важно:

корректно настроить заголовки безопасности (CSP, X-Frame-Options);
продумать SSO или cookie‑авторизацию.

Безопасность при использовании iframe

X-Frame-Options и CSP frame-ancestors

Когда вы встраиваете чужой контент, вы подчиняетесь его настройкам безопасности:

X-Frame-Options: DENY — сайт вообще запрещает себя встраивать;
X-Frame-Options: SAMEORIGIN — разрешает только в рамках того же домена;
Content-Security-Policy: frame-ancestors ... — более гибкая политика, указывает, кто может встраивать ресурс.

Если вы управляете сервером своего контента, то этими заголовками вы решаете, может ли кто‑то встраивать вашу страницу в iframe.

Clickjacking и защита

Clickjacking — атака, когда злоумышленник встраивает ваш сайт в iframe, делает его прозрачным и заставляет пользователя кликать «по вашему сайту», не понимая этого.

Чтобы защититься:

запрещайте встраивание вообще или ограничивайте круг доменов;
используйте X-Frame-Options: SAMEORIGIN или DENY;
или Content-Security-Policy: frame-ancestors 'self' https://trusted.com.

Ограничение возможностей через sandbox и allow

Если вы встраиваете чужой контент, дополнительно:

максимально включайте sandbox;
точечно разрешайте только то, что критично для работы виджета;
используйте referrerpolicy для уменьшения утечки информации.

Например:

<iframe
  src="https://external-widget.com/..."
  sandbox="allow-scripts allow-same-origin"
  referrerpolicy="origin"
  loading="lazy"
  title="Внешний виджет в песочнице">
</iframe>

Здесь вы:

не позволяете виджету менять окно верхнего уровня;
не даете открывать всплывающие окна;
ограничиваете доступ к форме и другим потенциально опасным действиям.

Смешанный контент (HTTP в HTTPS)

Если ваш сайт отдается по HTTPS, а вы встраиваете iframe по HTTP, браузер может заблокировать такой iframe как небезопасный смешанный контент.

Рекомендации:

всегда используйте HTTPS‑версии ресурсов;
не полагайтесь на протокол «по умолчанию», прописывайте https явно;
проверяйте консоль разработчика на предупреждения о mixed content.

Лучшие практики использования iframe

Когда iframe — хорошее решение

Используйте iframe, когда:

вам нужно безопасно встроить сторонний функционал (оплата, чат, виджет);
вы хотите отделить крупное приложение или админку от основного сайта;
вы встраиваете ресурс, над которым не имеете контроля (видео‑плеер, карта, соцсеть);
важна изоляция JavaScript и стилей.

Когда iframe — плохое решение

Старайтесь не использовать iframe:

для обычной навигации по вашему же сайту (лучше делать SPA или обычную навигацию);
чтобы скрыть архитектурные проблемы (например, «обернуть» старый сайт в новый);
для небольших компонентов, которые можно реализовать нативно или через JS‑виджеты.

Проблемы iframe:

сложная коммуникация между окнами;
проблемы с SEO (поисковик видит страницу, но не обязательно интерпретирует содержимое фрейма как часть сайта);
возможные трудности с доступностью;
ограничения политики одинакового источника.

Заключение

Элемент iframe в HTML — это мощный инструмент, который позволяет встраивать независимые веб‑страницы внутрь вашего сайта. Он предоставляет:

изоляцию контента на уровне DOM, JS и стилей;
возможность интеграции сторонних сервисов без глубокого вмешательства в их код;
гибкие настройки безопасности через sandbox, allow, referrerpolicy и серверные заголовки.

Вместе с тем, у iframe есть ограничения:

политика одинакового источника усложняет взаимодействие;
нужно аккуратно относиться к безопасности и защите от clickjacking;
чрезмерное использование фреймов может ухудшить производительность и усложнить архитектуру фронтенда.

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

Частозадаваемые технические вопросы по iframe

Как скрыть полосы прокрутки внутри iframe, если у меня нет доступа к коду страницы внутри?

Скрыть именно содержимое вы не сможете без контроля над ним. Но можно ограничить видимую область:

Задайте фиксированную высоту и overflow: hidden для самого iframe: css iframe.no-scroll { width: 100%; height: 300px; border: 0; overflow: hidden; }
Примените класс no-scroll к нужному iframe. Это не уберет прокрутку внутри документа, но «обрежет» видимую часть.

Почему мой iframe не отображается в полноэкранном режиме даже при вызове requestFullscreen?

Нужно выполнить несколько шагов:

На стороне iframe вызвать element.requestFullscreen() по пользовательскому действию (клик).
На стороне родителя в iframe указать: html <iframe src="..." allow="fullscreen" title="..." ></iframe>
Убедитесь, что браузер разрешает полноэкранный режим с этого домена. Без атрибута allow="fullscreen" многие браузеры блокируют переход в fullscreen.

Как передать токен авторизации из родительского окна в iframe с другого домена?

Используйте postMessage:

После загрузки iframe отправьте токен: js const frame = document.getElementById('remote'); frame.addEventListener('load', () => { frame.contentWindow.postMessage( { type: 'auth', token: '...' }, 'https://remote.example.com' ); });
Внутри iframe: js window.addEventListener('message', (event) => { if (event.origin !== 'https://parent.example.com') return; if (event.data.type === 'auth') { const token = event.data.token; // Используем токен для запросов } }); Всегда проверяйте event.origin, чтобы не принять данные от неизвестного источника.

Как запретить пользователям моего сервиса встраивать мои страницы в iframe на своих сайтах?

Настройте заголовки на сервере:

Простой вариант:
- X-Frame-Options: SAMEORIGIN — разрешает встраивание только с вашего домена;
- или DENY — запрещает полностью.
Современный вариант:
- Content-Security-Policy: frame-ancestors 'self'; Это предотвратит загрузку вашего сайта внутри iframe на чужих доменах.

Как безопасно показывать страницу другого домена, чтобы она не могла перенаправить пользователя с моего сайта?

Используйте sandbox без разрешения навигации:

<iframe
  src="https://external.example.com"
  sandbox="allow-scripts allow-same-origin"
  title="Просмотр внешней страницы">
</iframe>

Здесь страница сможет выполнять свои скрипты, но:

не сможет менять top.location;
не сможет открыть новые окна (если не указать allow-popups);
останется в изолированной песочнице.

Тег object в HTML - как встраивать сторонний контент и управлять им Тег embed в HTML - как встраивать внешние ресурсы на страницу

Постройте личный план изучения Html до уровня Middle — бесплатно!

Html — часть карты развития Frontend

100+ шагов развития
30 бесплатных лекций
300 бонусных рублей на счет

Все гайды по Html

Форматирование текста

Тег strong в HTML - полное руководство по семантическому выделению важного текста Тег параграфа p в HTML Тег mark в HTML Тег ins в HTML Тег горизонтальной линии HTML hr - разбор возможностей и примеры использования Теги заголовков HTML полное руководство по структуре страницы Тег em в HTML - полное руководство по семантическому выделению текста Тег del в HTML - подробное руководство по использованию Тег переноса строки HTML br

Таблицы

Строка таблицы HTML tr - полное руководство для верстальщиков и разработчиков Функция append в Go Golang Заголовок таблицы HTML th - полное руководство Подвал таблицы HTML tfoot Ячейка таблицы HTML td - полное руководство по верстке таблиц Тело таблицы HTML tbody - как правильно использовать и управлять табличными данными HTML тег table - как создавать и оформлять таблицы на практике Группа колонок HTML colgroup

Семантические элементы

Тег section в HTML - семантическая разметка структуры страницы Тег nav в HTML - полное руководство по семантической навигации Тег main в HTML - подробное руководство по использованию Тег header в HTML - полное практическое руководство Тег footer в HTML - назначение семантика и практические примеры Тег figure в HTML - как правильно оформлять иллюстрации и подписи Тег figcaption в HTML - подробное руководство с примерами Тег aside в HTML - назначение правильная семантика и примеры

Скрипты

HTML шаблоны template - от базовой разметки до динамических интерфейсов Слоты компонентов в HTML slot - полное руководство Тег script в HTML - как правильно подключать и исполнять JavaScript Тег noscript в HTML - как и когда его использовать

Мета-информация

Атрибут viewport в HTML - полный разбор для разработчиков Тег meta в HTML - полное практическое руководство Ключевые слова в HTML - keywords - подробный разбор Мета описание description в HTML - полное руководство Атрибут charset в HTML - полное руководство для разработчиков

Медиа

Функция append в Go (Golang)Функция append в Go Golang Атрибут в HTML и объектно ориентированном программировании Функция append в Go (Golang)Тег изображения img в HTML - полный разбор для практической верстки Тег audio в HTML Атрибут в программировании - что это такое и как с ним работать

Ссылки

Атрибут target в HTML - использование и подводные камни Атрибут rel в HTML - полное практическое руководство Атрибут href в HTML - подробное руководство для начинающих и практикующих разработчиков Атрибут download в HTML Тег ссылки HTML a - полное руководство для начинающих и практикующих разработчиков

Списки

Маркированный список HTML ul - основы синтаксиса стилизация и лучшие практики Нумерованный список HTML ol Элемент списка HTML li - как правильно создавать и оформлять элементы списка Термин определения HTML dt Список определений HTML dl - dl dt dd практическое руководство Тег dd в HTML - полное описание и примеры использования

Интерактивные элементы

Заголовок details в HTML - summary Контекстное меню в HTML - menu Диалоговое окно в HTML dialog Раскрывающийся блок в HTML - details

Формы

Текстовая область HTML textarea - практическое руководство Выпадающий список HTML select - полное руководство для разработчиков Опция списка HTML option - как работает и как правильно использовать Атрибут method в HTML - как правильно отправлять данные формы Заголовок группы HTML legend - как правильно использовать и оформлять Тег input в HTML - типы атрибуты валидация и примеры Тег формы form в HTML Группа полей HTML fieldset Атрибут action в HTML - как правильно задавать адрес отправки формы

Встраиваемый контент

Тег object в HTML - как встраивать сторонний контент и управлять им Встроенный фрейм HTML iframe - полное практическое руководство Тег embed в HTML - как встраивать внешние ресурсы на страницу

Элементы форм

Текстовое поле input text в HTML - полное руководство Кнопка отправки в HTML - input submit Кнопка сброса в HTML input-reset - полное руководство Радиокнопка в HTML - input radio Чекбокс в HTML - input-checkbox для начинающих и не только Поле пароля в HTML - input-password

Структура документа

Тег title в HTML - назначение правила оформления и лучшие практики Тег html в HTML5 - полное практическое руководство Тег head в HTML - структура настройки и лучшие практики Декларация DOCTYPE в HTML Тег body в HTML - структура страницы и основные возможности Тег base в HTML - полный разбор и практические примеры

Доступность

Всплывающая подсказка в HTML title ARIA роль - полное руководство для разработчиков ARIA label в HTML - подробное руководство по доступным интерфейсам Атрибут aria-hidden - как управлять видимостью элементов для скринридеров Альтернативный текст в HTML - как правильно использовать атрибут alt

Открыть базу знаний

Лучшие курсы по теме

HTML и CSS

Антон Ларичев

AI-тренажеры

Практика в студии

Гарантия

Бонусы

4.9

3 999 ₽ 6 990 ₽

Подробнее

TypeScript с нуля

Антон Ларичев

AI-тренажеры

Практика в студии

Гарантия

Бонусы

4.8

3 999 ₽ 6 990 ₽

Подробнее

Next.js - с нуля

Антон Ларичев

AI-тренажеры

Практика в студии

Гарантия

Бонусы

4.7

3 999 ₽ 6 990 ₽

Подробнее

Отправить комментарий

Скидка 15% по промокоду

Встроенный фрейм HTML iframe - полное практическое руководство

Введение

Основы элемента iframe

Базовый синтаксис

Встроенный контент и независимый контекст

Основные атрибуты iframe

src и srcdoc

src

srcdoc

width и height

name

title

frameborder, scrolling и устаревшие атрибуты

Современные атрибуты и безопасность

sandbox

allow и управление возможностями

referrerpolicy

loading

Адаптивные iframe и управление размерами

Процентная ширина

Сохранение пропорций (под видео, карты)

Высота по содержимому: почему это сложно

Если содержимое с того же домена

Если содержимое с другого домена

Взаимодействие через JavaScript

Доступ к содержимому iframe с того же домена

Доступ к родительскому окну из iframe

Безопасное взаимодействие между доменами через postMessage

Отправка сообщения из iframe родителю

Обработка сообщений в родительском окне

Сценарии использования iframe

Встраивание видео

Встраивание карт

Встраивание виджетов и форм

Встраивание внутренних админ‑панелей

Безопасность при использовании iframe

X-Frame-Options и CSP frame-ancestors

Clickjacking и защита

Ограничение возможностей через sandbox и allow

Смешанный контент (HTTP в HTTPS)

Лучшие практики использования iframe

Когда iframe — хорошее решение

Когда iframe — плохое решение

Рекомендации по производительности

Заключение

Частозадаваемые технические вопросы по iframe

Как скрыть полосы прокрутки внутри iframe, если у меня нет доступа к коду страницы внутри?

Почему мой iframe не отображается в полноэкранном режиме даже при вызове requestFullscreen?

Как передать токен авторизации из родительского окна в iframe с другого домена?

Как запретить пользователям моего сервиса встраивать мои страницы в iframe на своих сайтах?

Как безопасно показывать страницу другого домена, чтобы она не могла перенаправить пользователя с моего сайта?

Постройте личный план изучения Html до уровня Middle — бесплатно!

Все гайды по Html

Лучшие курсы по теме

HTML и CSS

TypeScript с нуля

Next.js - с нуля