HTML :: Тег <iframe>

В HTML тег <iframe> (от англ. inline frame – встроенный фрейм) создает в документе прямоугольную область (встроенный фрейм), в которую можно загружать любые другие независимые документы.

Внутри элемента <iframe> можно указывать альтернативное содержимое, которое будет отображаться браузерами не поддерживающими данный элемент.

При одновременном использовании в элементе <iframe> атрибутов srcdoc и src атрибут src игнорируется.

Синтаксис

	<iframe>...</iframe>		    
	
	Закрывающий тег: обязателен.

Атрибуты

allowfullscreen – данный логический атрибут разрешает программно увеличивать размер фрейма на весь экран скриптами, например, при воспроизведении видеороликов.
height – задает высоту фрейма.
name – задает имя фрейма, через которое к нему можно обращаться, например, через скрипты.
sandbox – позволяет устанавливать ограничения на загружаемый контент (разрешается через пробел указывать сразу несколько значений атрибута):
- "" – если значение не указывать, то действуют все ограничения сразу;
- "allow-forms" – разрешает использование форм во фрейме;
- "allow-pointer-lock" – разрешает включение API-интерфейсов (интерфейс прикладного программирования) во фрейме;
- "allow-popups" – разрешает всплывающие окна во фрейме;
- "allow-same-origin" – считается, что загружаемый во фрейм документ принадлежит тому же источнику, что и основной документ;
- "allow-scripts" – разрешает работу скриптов во фрейме;
- "allow-top-navigation" – разрешает содержимому фрейма получать доступ к элементам основного окна.
src – в качестве значения принимает полный или относительный путь к загружаемому во фрейм документу.
srcdoc – в качестве значения принимает код документа, загружаемого во фрейм (можно указывать как весь код документа, так и часть в виде содержимого тела документа).
width – задает ширину фрейма.
Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/iframe

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №1</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

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №2</title>
</head>
<body>
	     
<iframe width="560" height="315" 

srcdoc="
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
	&lt;!-- Задаем кодировку текста. --&gt;
	&lt;meta charset=&quot;utf-8&quot;&gt;  
	&lt;title&gt;Первая html-страница&lt;/title&gt;
  &lt;/head&gt;
 
  &lt;body&gt;
	Всем привет от HTML!
  &lt;/body&gt;
&lt;/html&gt;
">

Ваш браузер не поддерживает встроенные фреймы!

</iframe>
   	
</body>
</html>

Пример №2