Тег <iframe> | Справочник HTML
http://belarusweb.net
Основы создания сайтов

Тег <iframe>

Описание

Тег <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 – задает ширину фрейма.
  • Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Примеры

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №1</title>
</head>
<body>
	     
  <!--  Код фрейма берем на Ютубе  -->
  <iframe width="560" height="315" 
  src="https://www.youtube.com/embed/1yLaXumRSOM?list=PLJo3XsdIhLlsVV5ZMlQ85yVTFVaoIbotq" 
  frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; 
  picture-in-picture" allowfullscreen>
  
  Ваш браузер не поддерживает встроенные фреймы!
  
  </iframe>
   	
</body>
</html>

Пример №1

HTML Результат BwCodes
<!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