HTML :: Фреймы
Тег <iframe> и его атрибуты src, name, width, height
Иногда возникает необходимость вставить в html-документ не только изображения или мультимедийные объекты, но и другие независимые html-документы. Для этой цели предусмотрен специальный элемент, называемый фреймом, который формируется парным тегом <iframe> (от англ. inline frame – встроенный фрейм). Данный элемент создает в документе прямоугольную область, в которую, по умолчанию, и загружается внешний документ, полный или относительный путь к которому указывается в качестве значения атрибута src (см. пример №1).
Чтобы задать размеры области, выделяемой под фрейм, используются атрибуты width и height. При этом если указать атрибут allowfullscreen, то его размер можно будет программно увеличивать на весь экран скриптами внутри фрейма, например, при воспроизведении видеороликов.
Также фрейму можно задать уникальное имя при помощи атрибута name. В дальнейшем это имя можно использовать в качестве значения атрибута target гиперссылок для загрузки документов в указанный фрейм.
В настоящий момент фреймы часто используются для размещения рекламных роликов или вставки мультимедийных объектов из других ресурсов. Известным примером может служить вставка на страницу сайта видеороликов с Youtube, что мы и реализовали в нашем примере №1, вставив на страницу ролик про нашего пса Саймона, но уже не со своего сервера, а с видеохостинга Youtube.
htmlCodes
<!DOCTYPE html> <html> <head> <!-- Незабываем задавать служебные элементы --> <meta charset="utf-8"> <base href="https://site.name/"> <title>Фреймы</title> </head> <body> <!-- Код фрейма берем на Ютубе --> <iframe width="560" height="315" src="https://www.youtube.com/embed/txeKbmw7nro" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> Ваш браузер не поддерживает встроенные фреймы! </iframe> </body> </html>
Пример №1. Использование элемента «iframe»
Атрибут sandbox тега <iframe>
Важным атрибутом фрейма является sandbox, который позволяет устанавливать ограничения на загружаемый контент:
- "allow-forms" – разрешает использование форм во фрейме;
- "allow-pointer-lock" – разрешает включение API-интерфейсов (интерфейс прикладного программирования) во фрейме;
- "allow-popups" – разрешает всплывающие окна во фрейме;
- "allow-same-origin" – считается, что загружаемый во фрейм документ принадлежит тому же источнику, что и основной документ;
- "allow-scripts" – разрешает работу скриптов во фрейме;
- "allow-top-navigation" – разрешает содержимому фрейма получать доступ к элементам основного окна.
Разрешается через пробел указывать сразу несколько значений атрибута sandbox. Если атрибут указан без значения, то действуют все ограничения сразу.
Атрибут srcdoc тега <iframe>
Код документа, загружаемого во фрейм, может быть указан в качестве значения атрибута srcdoc, которое может содержать, как полный код html-документа, так и включать только содержимое тела документа. При одновременном использовании атрибутов srcdoc и src атрибут src игнорируется.