Атрибут | Описание |
---|---|
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>