Кратко
Скопировано<iframe>
— это контейнер, который позволяет вставить любой HTML-документ из другого источника. Часто этот документ интерактивный — например, карта, видео или пост из соцсети.
Этот контейнер обычно называют фреймом. Внешний вид фрейма и его положение на странице можно задать через CSS.
Пример
СкопированоС помощью такого нехитрого кода мы можем встроить карту размером 560 на 400 пикселей на любую страницу:
<iframe id="inlineFrameExample" title="Inline Frame Map" width="560" height="400" frameborder="1" allowfullscreen="true" src="https://yandex.ru/map-widget/v1/-/CBFkaYSE0A"></iframe>
<iframe id="inlineFrameExample" title="Inline Frame Map" width="560" height="400" frameborder="1" allowfullscreen="true" src="https://yandex.ru/map-widget/v1/-/CBFkaYSE0A" > </iframe>
Как понять
Скопировано<iframe>
можно представить как «окно» или фрейм, через которое на вашей странице можно увидеть любое содержимое с других сайтов. Это значит, что если карту, видео, пост или другой элемент удалят с оригинального сайта, он пропадёт и с вашей страницы. Останется только пустое место или надпись вроде «Контент недоступен».
Встраивать файлы можно либо по ссылке с помощью атрибута src
, либо целиком HTML-код файла с помощью srcdoc
.
Как пишется
СкопированоЧасто сервисы, из которых мы хотим что-то встроить (карты, посты и тому подобное), сами могут сгенерировать вам <iframe>
. Его останется только добавить в свой код.
Контейнер <iframe>
нужно всегда закрывать.
Атрибуты
Скопированоsrc
— URL-адрес файла, который вы встраиваете.
srcdoc
— позволяет встроить HTML-код целиком, так что браузеру не придётся подгружать что-то по внешней ссылке. Если используется этот атрибут, то ссылка src
игнорируется.
sandbox
— ограничивает определённые действия и функции встраиваемого документа. Если просто указать атрибут sandbox
, то он применит сразу все возможные ограничения. Либо можно указать нужные ограничения в любом порядке через пробел:
Возможные значения атрибута sandbox
allow
— позволяет отправлять формы внутри- forms <iframe>
.allow
— позволяет открывать модальные окна, которые мы все так не любим: вроде «Оставьте свой имейл» или «Не уходите так быстро! У вас товар в корзине». Обычно эти окна не дают пользоваться сайтом, пока их не закроешь.- modals allow
— позволяет фиксировать горизонтальное или вертикальное положение экрана.- orientation - lock allow
— позволяет пользователю управлять содержимым- pointer - lock <iframe>
с помощью курсора через Pointer Lock API.allow
— разрешает показ всплывающих окон, вызванных с помощью- popups window
,. open ( ) target
или= " _ blank" show
.Modal Dialog ( ) allow
— позволяет содержимому фрейма открывать новые окна. С этим параметром у таких окон не будет тех ограничений, которые есть у- popups - to - escape - sandbox <iframe>
с атрибутомsandbox
.allow
— разрешает использовать Presentation API.- presentation allow
— контент из- same - origin <iframe>
загружается по тем же правилам и с теми же ограничениями, что и страница, на которой он находится.allow
— позволяет загружать скрипты. При этом всплывающие окна будут запрещены.- scripts allow
— позволяет открывать ссылки, которые есть в- top - navigation <iframe>
, в том же окне, в которое встроен фрейм.allow
— позволяет контенту из фрейма управлять страницей, на которой он находится. Но только по инициативе пользователя.- top - navigation - by - user - activation
name
— имя фрейма. Пригодится, чтобы создать ссылку, по которой новая страница будет открываться в нужном фрейме.
Подсказки
Скопировано💡 Атрибут sandbox
будет игнорироваться, если использовать одновременно значения allow
и allow
и если исходная страница и <iframe>
на ней загружаются из одного и того же источника.
💡 Помните, что <iframe>
— этот как будто ещё одна страница, которая загружается внутри вашей страницы. Содержимое фрейма может загружаться дольше, чем ваш сайт.
💡 В <iframe>
стоит добавить атрибут title
на случай, если пользователь не может увидеть страницу и использует инструмент чтения с экрана. Например, так:
<iframe title="Страница в Википедии о лемурах" src="https://ru.wikipedia.org/wiki/Обыкновенные_лемуры"></iframe>
<iframe title="Страница в Википедии о лемурах" src="https://ru.wikipedia.org/wiki/Обыкновенные_лемуры"></iframe>
На практике
Скопированосоветует Скопировано
🛠 Я редко использую <iframe>
. Только когда надо, например, встроить видео с YouTube.
Почти всегда лучше настроить заголовок cross
(это делается на уровне сервера) так, чтобы сторонние сайты не могли встраивать к себе ваш сайт как фрейм — это часто используется для всяких махинаций.