Понятие фрейма. Тег <iframe>
belarusweb.net
© Петр Романовский Минск, 2016-2018.



belarusweb.net
Основы создания сайтов...

Понятие фрейма. Тег <iframe>

Тег <iframe> и его атрибуты
src, name, width, height

Иногда возникает необходимость вставить в html-документ не только изображения или мультимедийные объекты, но и другие независимые html-документы. Для этой цели предусмотрен специальный элемент, называемый фреймом, который формируется парным тегом <iframe>. Данный элемент создает в документе прямоугольную область, в которую, по умолчанию, и загружается внешний документ, полный или относительный путь к которому указывается в качестве значения атрибута src (см. пример 5.4).

Чтобы задать размеры области, выделяемой под фрейм, используются атрибуты width и height. При этом если указать атрибут allowfullscreen, то его размер можно будет программно увеличивать на весь экран скриптами внутри фрейма, например, при воспроизведении видеороликов.

Также фрейму можно задать уникальное имя при помощи атрибута name. В дальнейшем это имя можно использовать в качестве значения атрибута target гиперссылок для загрузки документов в указанный фрейм.

В настоящий момент фреймы часто используются для размещения рекламных роликов или вставки мультимедийных объектов из других ресурсов. Известным примером может служить вставка на страницу сайта видеороликов с Youtube, что мы и реализовали в нашем примере 5.4, вставив на страницу ролик про нашего пса Саймона, но уже не со своего сервера, а с видеохостинга Youtube.

<!DOCTYPE html>
<html>
<head>
	<!--  Незабываем задавать служебные элементы  -->
	<meta charset="utf-8">	
	<base href="http://belarusweb.net/">
	<title>Фреймы</title>
</head>
<body>
		
	<!--  Код фрейма берем на Ютубе  -->
	<iframe width="560" height="315" frameborder="0"
	src="https://www.youtube.com/embed/PyQLv8S5bRI?rel=0" 
	allow="autoplay; encrypted-media" allowfullscreen></iframe>
	
</body>
</html>

Пример 5.4. Использование элемента '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 игнорируется.

Видеоуроки по курсу HTML

Комментарии (5)

Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Max
В статье можно ещё было указать атрибут scrolling, а то css свойство overflow с фреймами не работает
№118 от 2018-02-03 17:48:29
Нравится ()
Ответить
Петр Романовский
Max
Max
В статье можно ещё было указать атрибут scrolling, а то css свойство overflow с фреймами не работает
2018-02-03 17:48:29
Над данный момент атрибут scrolling вполне может быть полезен и работает, хотя и считается устаревшим. Чтобы обойтись без него, нужно свойство overflow использовать, например, для тела вставляемого документа. Также можно размеры тела документа, который вставляется во фрейм, задавать таким образом, чтобы документ не переполнял фрейм.
№119 от 2018-02-04 11:39:25
Нравится ()
Ответить
Max
Петр Романовский
Петр Романовский
Над данный момент атрибут scrolling вполне может быть полезен и работает, хотя и считается устаревшим. Чтобы обойтись без него, нужно свойство overflow использовать, например, для тела вставляемого документа. Также можно размеры тела документа, который вставляется во фрейм, задавать таким образом, чтобы документ не переполнял фрейм.
2018-02-04 11:39:25
Для тела документа тоже не действует, поэтому scrolling получается единственный вариант на данный момент
№120 от 2018-02-05 07:40:20
Нравится ()
Ответить
Петр Романовский
Max
Max
Для тела документа тоже не действует, поэтому scrolling получается единственный вариант на данный момент
2018-02-05 07:40:20
Max, создайте в одной папке на локальном сервере index.html и документ 1.html, который будете вставлять в iframe в этом документе. Вот коды, поэкспериментируйте и посмотрите результаты. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>iframe</title> <style> .iframe_block{ width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <iframe class="iframe_block" src="1.html"></iframe> </body> </html> ------------------------------------------------------------------- <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #frame_body{ width: 200px; height: 200px; margin: 0px; overflow: hidden; white-space: nowrap; } </style> </head> <body id="frame_body"> Текст тела вставляемого документа. </body> </html>
№121 от 2018-02-05 21:07:50
Нравится ()
Ответить
Max
Петр Романовский
Петр Романовский
Max, создайте в одной папке на локальном сервере index.html и документ 1.html, который будете вставлять в iframe в этом документе. Вот коды, поэкспериментируйте и посмотрите результаты. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>iframe</title> <style> .iframe_block{ width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <iframe class="iframe_block" src="1.html"></iframe> </body> </html> ------------------------------------------------------------------- <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #frame_body{ width: 200px; height: 200px; margin: 0px; overflow: hidden; white-space: nowrap; } </style> </head> <body id="frame_body"> Текст тела вставляемого документа. </body> </html>
2018-02-05 21:07:50
Понял, перепутал просто, применял overflow к body, где находится фрейм
№124 от 2018-02-07 10:05:49
Нравится ()
Ответить
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!