Элемент iframe

Атрибут Описание
name Устанавливает имя элемента, которое должно использоваться с тегом для изменения src iframe.
width Устанавливает ширину элемента в пикселях.
height Устанавливает высоту элемента в пикселях.
src Путь к странице, содержимое которой будет загружаться во фрейм.
srcdoc Позволяет непосредственно в данном атрибуте указать содержимое фрейма, которое должно быть HTML разметкой.
sandbox Позволяет ограничиваться содержимое iframe, например, отключать скрипты, плагины, формы и всплывающие окна. Можно выбирать накладываемые ограничения.
allowfullscreen Разрешает содержимому iframe использовать requestFullscreen() (полный экран)

Элемент «IFrame» означает «встроенный кадр». Его можно использовать для включения другой страницы в вашу страницу. Нижеприведенный код подключает небольшой фрейм, который показывает точное содержимое base.html.

<iframe src="base.html"></iframe>

Следующий код внедряет ненадежную веб-страницу с включенными ограничениями:

<iframe sandbox src="http://example.com/"></iframe>

Чтобы разрешить встроенной странице запускать сценарии и отправлять формы, добавьте значение allow-scripts allow-forms к атрибуту sandbox.

<iframe sandbox="allow-scripts allow-forms" src="http://example.com/"></iframe>

Если есть ненадежный контент (например, комментарии пользователей) в том же домене, что и родительская веб-страница, iframe может использоваться для отключения сценариев, позволяя при этом родительскому документу взаимодействовать с его содержимым с помощью JavaScript.

<iframe sandbox="allow-same-origin allow-top-navigation"
src="http://example.com/untrusted/comments/page2">

Родительский документ может добавлять обработчики событий и изменять размер iframe в соответствии с его содержимым, что наряду с allow-top-navigation, позволяет создавать изолированный фрейм, который будет казаться частью родительского документа. Эта песочница не является заменой для полной защиты, но может использоваться как часть стратегии глубоко эшелонированной обороны.

Имейте в виду, что этот атрибут может быть уничтожен злоумышленником, разрешая пользователю напрямую посетить источник фрейма. Для уменьшения этой атаки можно использовать HTTP-заголовок Content-Security-Policy-Report-Only.

Размер фрейма может быть изменен с использованием атрибутов width и height, значения в которых представлены в пикселях (HTML 4.01 разрешено процентное значение, но HTML 5 допускает только значения в пикселях CSS).

<iframe src="base.html" width="800" height="600"></iframe>

Атрибут srcdoc может использоваться (вместо атрибута src) для указания точного содержимого iframe как целого HTML-документа. Следующий код создаст фрейм с текстом «IFrames - это круто!».

<iframe srcdoc="<p>IFrames - это круто!</p>"></iframe>

Если атрибут srcdoc не поддерживается браузером, фрейм будет использовать атрибут src, однако если оба атрибута src и srcdoc присутствуют и поддерживаются браузером, srcdoc имеет приоритет.

<iframe srcdoc="<p>Iframes are cool!</p>" src="base.html"></iframe>

В приведенном выше примере, если браузер не поддерживает атрибут srcdoc, он будет отображать содержимое страницы base.html.

Обычно изменение веб-страницы во фрейме инициируется с помощью самого Iframe, например, щелком на ссылке внутри Ifame. Тем не менее можно изменить содержимое фрейма из-за его пределов. Вы можете использовать в ссылке атрибут href, указывающий на желаемый URL-адрес, а в атрибуте target указать имя фрейма.

<iframe src="webpage.html" name="myIframe"></iframe>
<a href="different_webpage.html" target="myIframe">Изменить содержимое фрейма
different_webpage.html</a>