HTML тег <iframe>

Значение и применение

Тег <iframe> (HTML Inline Frame Element) определяет встроенную в веб-страницу область, которая может отображать содержимое отдельно взятого документа (например, *.pdf), медиа-контента или другого веб-сайта в заданном пространстве. Содержимое внутри области существует независимо от окружающей страницы.

Синтаксис для добавления фрейма:

HTML
<iframe src = "URL"> </iframe>, где src атрибут, который определяет местоположение документа или веб-сайта.

Задавайте понятное название через глобальный атрибут title, например title="Карта проезда". Ссылку на исходный документ размещайте рядом: содержимое между тегами не служит отображаемой заменой. Сервер может запретить встраивание заголовком X-Frame-Options или директивой CSP frame-ancestors.

Поддержка браузерами

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (47) поддерживаются не везде — смотрите таблицу.

Показать браузеры
Совместимостьhtml.elements.iframe
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
iframe✓1✓12✓1✓≤15✓≤4✓18✓4✓≤14✓≤3.2✓1.0✓4.4✓≤3.2
align✓1✓12✓1✓15✓3✓18✓4✓14✓2✓1.0✓4.4✓2
allow✓60✓79✓74✓47✓11.1✓60✓79✓44✓11.3✓8.0✓60✓11.3
accelerometer✓66✓79×✓53×✓66×✓47×✓9.0✓66×
ambient-light-sensor◐66◐79×◐53×◐66××××××
attribution-reporting✓117✓117×✓103×✓117×✓78×✓24.0✓117×
autoplay✓64✓79✓74✓51×✓64✓79✓47×✓9.0✓64×
bluetooth✓104✓104×✓90×✓104×✓71×✓20.0✓104×
browsing-topics✓115✓115×✓101×✓115×✓77×✓23.0✓115×
camera✓64✓79✓74✓48✓11.1✓64✓79✓45✓11.3✓9.0✓64✓11.3
compute-pressure✓125✓125×✓111××××××××
cross-origin-isolated✓87✓87×✓73×✓87×✓62×✓14.0✓87×
display-capture✓94✓94✓74✓80✓13✓94×✓66×✓17.0✓94×
document-domain◐64◐79✓74◐51××✓79×××××
encrypted-media✓64✓79✓74✓48×✓64✓79✓45×✓9.0✓64×
fullscreen✓62✓79✓80✓49×✓62✓80✓46×✓8.0✓62×
gamepad××◐91×××◐91×××××
geolocation✓64✓79✓74✓51×✓64✓79✓47×✓9.0✓64×
gyroscope✓66✓79×✓53×✓66×✓47×✓9.0✓66×
hid✓89✓89×✓75×✓89×✓63×✓15.0✓89×
identity-credentials-get✓110✓110×✓96×✓110×✓74×✓21.0××
idle-detection✓94✓94×✓80×✓94×✓66×✓17.0✓94×
local-fonts✓103✓103××××××××××
magnetometer◐66◐79×◐53×◐66××××××
microphone✓64✓79✓74✓48✓11.1✓64✓79✓45✓11.3✓9.0✓64✓11.3
midi✓64✓79✓74✓51×✓64✓79✓47×✓9.0✓64×
otp-credentials✓93✓93×✓79×✓84×✓60×✓14.0××
payment✓60✓79✓74✓47×✓60✓79✓44×✓8.0✓136×
picture-in-picture✓69✓79✓153××✓105×✓72×✓20.0✓105×
publickey-credentials-create××✓123×××✓123×××××
publickey-credentials-get✓84✓84✓118××✓84✓118××✓14.0✓84×
screen-wake-lock✓84✓84✓126✓70✓16.4✓84✓126✓60✓16.4✓14.0✓84✓16.4
serial✓89✓89✓151✓75×✓89×✓63×✓15.0✓89×
speaker-selection××✓116×××××××××
storage-access✓113✓113×✓99×✓113×✓76×✓23.0✓113×
usb✓60✓79×✓47×✓60×✓44×✓8.0××
web-share✓86✓86✓81✓72×✓86✓81✓61×✓14.0✓86×
wildcards✓108✓108×✓94×✓108×✓73×✓21.0✓108×
window-management✓100✓100×✓86×✓100×✓69×✓19.0××
xr-spatial-tracking✓79✓79×✓66×✓79×××✓12.0××
allowfullscreen✓38✓12✓18✓25✓10.1✓38✓18✓25◐12✓3.0✓38◐12
allowpaymentrequest✓60✓79×✓47×✓60×✓44×✓8.0✓136×
browsingtopics✓126✓126×✓112×✓126×✓83×✓28.0✓126×
credentialless✓110✓110×✓96×✓110×✓74×✓21.0✓110×
cross-origin-top-navigation-by-user-activation✓68✓79✓144✓55✓13✓68✓144✓48✓13✓10.0✓68✓13
csp✓61✓79×✓48×✓61×✓45×✓8.0✓61×
frameborder✓1✓12✓1✓15✓3✓18✓4✓14✓2✓1.0✓4.4✓2
height✓1✓12✓1✓15✓3✓18✓4✓14✓2✓1.0✓4.4✓2
loading✓77✓79✓121✓64✓16.4✓77✓121✓55✓16.4✓12.0✓77✓16.4
longdesc✓1✓12✓1✓15✓3✓18✓4✓14✓2✓1.0✓4.4✓2
marginheight✓1✓12✓1✓15✓3✓18✓4✓14✓2✓1.0✓4.4✓2
marginwidth✓1✓12✓1✓15✓3✓18✓4✓14✓2✓1.0✓4.4✓2
name✓1✓12✓1✓15✓3✓18✓4✓14✓2✓1.0✓4.4✓2
privateToken✓117✓117×✓103×✓117×✓78×✓24.0××
referrerpolicy✓51✓79✓50✓38✓14✓51✓50✓41✓14✓7.2✓51✓14
no-referrer-when-downgrade✓51✓79×✓38×✓51×✓41×✓7.2✓51×
origin-when-cross-origin✓51✓79×✓38×✓51×✓41×✓7.2✓51×
unsafe-url✓51✓79×✓38×✓51×✓41×✓7.2✓51×
sandbox✓5✓12✓17✓15✓5✓18✓17✓14✓4✓1.0✓4.4✓4
allow-downloads✓83✓83✓82✓69✓17✓83✓82✓59✓17✓13.0✓83✓17
allow-forms✓5✓79✓≤49✓15✓5✓18✓≤49✓14✓4✓1.0✓4.4✓4
allow-modals✓46✓79✓49✓33✓11.1✓46✓49✓33✓11.3✓5.0✓46✓11.3
allow-orientation-lock✓68✓79✓≤49✓55×✓68✓≤49✓48×✓10.0✓68×
allow-pointer-lock✓23✓79✓≤49✓15✓10.1✓144✓≤49✓95××✓144×
allow-popups✓17✓12✓28✓15✓6✓18✓27✓14✓6✓1.0✓4.4✓6
allow-popups-to-escape-sandbox✓46✓79✓49✓33✓11.1✓46✓49✓33✓11.3✓5.0✓46✓11.3
allow-presentation✓53✓79✓50✓40×✓53✓50✓41×✓6.0××
allow-same-origin✓5✓79✓≤49✓15✓5✓18✓≤49✓14✓4✓1.0✓4.4✓4
allow-scripts✓5✓79✓≤49✓15✓5✓18✓≤49✓14✓4✓1.0✓4.4✓4
allow-storage-access-by-user-activation✓113✓113✓65✓99✓11.1✓113✓65✓76✓11.3✓23.0✓113✓11.3
allow-top-navigation✓6✓79✓≤49✓15✓5✓18✓≤49✓14✓4.2✓1.0✓4.4✓4.2
allow-top-navigation-by-user-activation✓58✓79✓79✓45✓11.1✓58✓79✓43✓11.3✓7.0✓58✓11.3
allow-top-navigation-to-custom-protocols××✓101×✓16×✓101×✓16××✓16
scrolling✓1✓12✓1✓15✓3✓18✓4✓14✓2✓1.0✓4.4✓2
src✓1✓12✓1✓15✓≤4✓18✓4✓14✓≤3.2✓1.0✓4.4✓≤3.2
srcdoc✓20✓79✓25✓15✓6✓25✓25✓14✓6✓1.5✓37✓6
width✓1✓12✓1✓15✓3✓18✓4✓14✓2✓1.0✓4.4✓2

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Атрибуты

Атрибут Значение Описание
align left
right
top
middle
bottom 		Не поддерживается в HTML5.
Определяет выравнивание элемента в соответствии с окружающими элементами.
frameborder 0
1 		Не поддерживается в HTML5.
Указывает, следует ли отображать рамку вокруг элемента.
height pixels Определяет высоту элемента.
longdesc URL Не поддерживается в HTML5.
Указывает страницу, содержащую длинное описание содержания элемента.
marginheight pixels Не поддерживается в HTML5.
Отступ сверху и снизу от содержания до границы фрейма.
marginwidth pixels Не поддерживается в HTML5.
Указывает отступ слева и справа от содержания до границы фрейма.
name text Задаёт имя элемента.
sandbox allow-forms
allow-pointer-lock
allow-popups
allow-same-origin
allow-scripts
allow-top-navigation 		Пустой атрибут включает ограничения на скрипты, формы, всплывающие окна и навигацию. Токены через пробел возвращают отдельные возможности. Не сочетайте allow-scripts и allow-same-origin для содержимого своего источника: оно сможет снять песочницу.
scrolling auto
yes
no 		Не поддерживается в HTML5.
Указывает, отображать или нет полосы прокрутки в элементе.
src URL Определяет адрес документа для встраивания в элемент.
srcdoc HTML_code Указывает HTML-код, который будет показан во фрейме.
width pixels Определяет ширину элемента.
loadingeager | lazyЗагрузка сразу (по умолчанию) или при приближении к видимой области.
allowПолитика разрешенийРазрешённые возможности, например fullscreen; autoplay. Не отменяет ограничения политики родительской страницы.
allowfullscreenЛогический атрибутРазрешает запрос полноэкранного режима с учётом политики разрешений.
referrerpolicyПолитика RefererУправляет передачей адреса страницы встроенному ресурсу; no-referrer может нарушить работу сервиса, которому нужна идентификация источника.

Примеры, попробуйте сами

Пример iframe

Вложенные документы отключены в редакторе. Сохраните разметку в HTML-файл и откройте отдельно.

Исходный код для изучения. Запуск на этой странице недоступен.

index.html
HTML
<iframe title="Вложенный документ" srcdoc="<p>Содержимое отдельного документа.</p>"></iframe>

Отличия HTML 4.01 от HTML 5

В HTML5 добавлено два новых атрибута, большинство используемых в HTML 4.01 атрибутов было удалено.

Размеры и оформление

Без заданных размеров область обычно занимает 300 × 150 CSS-пикселей. Атрибуты width и height принимают числа без единиц; рамку и адаптивные размеры задавайте CSS. Не убирайте видимый индикатор клавиатурного фокуса.

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".