Поиск…
параметры
| атрибут | подробности |
|---|---|
name | Задает имя элемента, который будет использоваться с a теге , чтобы изменить Iframe в src . |
width | Устанавливает ширину элемента в пикселях. |
height | Устанавливает высоту элемента в пикселях. |
src | Задает страницу, которая будет отображаться в кадре. |
srcdoc | Задает контент, который будет отображаться в кадре, при условии, что браузер поддерживает его. Содержимое должно быть действительным HTML. |
sandbox | Когда установлено, содержимое iframe рассматривается как уникальное происхождение, и функции, включая скрипты, плагины, формы и всплывающие окна, будут отключены. Ограничения могут быть выборочно расслаблены, добавляя список значений, разделенных пробелом. См. Таблицу в примечаниях для возможных значений. |
allowfullscreen | Разрешить ли содержимому iframe использовать requestFullscreen() |
замечания
IFrame используется для встраивания другого документа в текущий HTML-документ.
Вы можете использовать iframes для отображения:
- другие HTML-страницы в одном домене;
- другие HTML-страницы в другом домене (см. ниже - политика одинакового происхождения);
- PDF-документы (хотя IE может иметь некоторые проблемы, этот вопрос может помочь);
Вы ДОЛЖНЫ использовать iframe в качестве последнего средства, поскольку у него есть проблемы с закладок и навигации, и всегда есть лучшие варианты, отличные от iframe. Этот вопрос должен помочь вам лучше понять взлеты и падения iframes.
Политика же происхождения
Некоторые сайты не могут отображаться с использованием iframe, поскольку они применяют политику, называемую политикой «один и тот же источник» . Это означает, что сайт, на котором лежит iframe, должен находиться в том же домене, что и отображаемый.
Эта политика также применяется для управления содержимым, которое находится внутри iFrame. Если iFrame обращается к содержимому из другого домена, вы не сможете получить доступ к содержимому внутри iFrame или манипулировать им.
Элемент iframe на W3C
атрибут sandbox
Атрибут sandbox при установке добавляет дополнительные ограничения для iframe. Для ослабления этих ограничений можно использовать список токенов, разделенных пробелами.
| Значение | подробности |
|---|---|
allow-forms | Позволяет отправлять формы. |
allow-pointer-lock | Включает API-интерфейс JavaScript-указателя. |
allow-popups | Всплывающие окна могут быть созданы с помощью window.open или <a target="_blank" |
allow-same-origin | В документе iframe используется реальное происхождение, а не уникальное. Если используется с allow-scripts документ iframe может удалить всю песочницу, если она имеет тот же источник, что и родительский документ. |
allow-scripts | Включает скрипты. Документ iframe и родительский документ могут взаимодействовать друг с другом с помощью API postMessage() . Если используется с allow-same-origin документ iframe может удалить всю песочницу, если она имеет тот же источник, что и исходный документ. |
allow-top-navigation | Позволяет содержимому iframe изменять местоположение документа верхнего уровня. |
Основы встроенной структуры
Термин «IFrame» означает «Встроенный кадр». Его можно использовать для включения другой страницы на вашу страницу. Это даст небольшой кадр, который показывает точное содержимое base.html .
<iframe src="base.html"></iframe>
Установка размера рамки
IFrame может быть изменен с использованием атрибутов width и height , где значения представлены в пикселях (HTML 4.01 разрешено процентное значение, но HTML 5 допускает только значения в пикселях CSS).
<iframe src="base.html" width="800" height="600"></iframe>
Использование якорей с IFrames
Обычно изменение веб-страницы в iframe инициируется с помощью Iframe, например, щелкая ссылку внутри Ifame. Тем не менее, можно изменить содержимое IFrame из-за пределов IFrame. Вы можете использовать якорь тег , чье href атрибут установлен желаемый URL и чей target атрибут установлен в Iframe по name атрибута.
<iframe src="webpage.html" name="myIframe"></iframe>
<a href="different_webpage.html" target="myIframe">Change the Iframe content to different_webpage.html</a>
Использование атрибута «srcdoc»
srcdoc может использоваться (вместо атрибута src ) для указания точного содержимого iframe как целого HTML-документа. Это даст IFrame с текстом «IFrames классные!».
<iframe srcdoc="<p>IFrames are cool!</p>"></iframe>
Если атрибут srcdoc не поддерживается браузером, IFrame вместо этого вернется к использованию атрибута src , но если оба атрибута src и srcdoc присутствуют и поддерживаются браузером, srcdoc имеет приоритет.
<iframe srcdoc="<p>Iframes are cool!</p>" src="base.html"></iframe>
В приведенном выше примере, если браузер не поддерживает атрибут srcdoc , он будет отображать содержимое страницы base.html .
Песочница
Следующие внедряют ненадежную веб-страницу с включенными ограничениями
<iframe sandbox src="http://example.com/"></iframe>
Чтобы страница запускала сценарии и отправляла формы, добавьте allow-scripts и allow-forms к sandbox attribute .
<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 , может сделать изолированный iframe, как представляется, частью родительского документа.
Эта песочница не является заменой для дезинфекции, но может использоваться как часть стратегии защиты в глубину .
Также имейте в виду, что эта песочница может быть подорвана злоумышленником, убеждая пользователя напрямую посетить источник iframe. Для уменьшения этой атаки можно использовать HTTP-заголовок политики безопасности контента .