HTML тег <iframe>

❮ Назад Вперед ❯

Тег <iframe> создает на веб-странице встроенную область (фрейм), в которой можно отображать содержимое другого документа или веб-страницы. Содержимое фрейма и веб-страницы, на которой он находится, независимы друг от друга, но они могут взаимодействовать через JavaScript.

Не все браузеры поддерживают фреймы. На этот случай необходимо указать альтернативный текст, который будет показан пользователю, если браузер не сможет отобразить содержимое фрейма.

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

Синтаксис

Содержимое элемента располагается между открывающим (<iframe>) и закрывающим (</iframe>) тегами.

Атрибут src является обязательным для тега <iframe>. Он указывает адрес документа, который должен отображаться в фрейме.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <iframe src="https://ru.w3docs.com"></iframe>
  </body>
</html>

Попробуйте сами!

Чтобы установить размер iframe, вы можете использовать атрибуты height и width или использовать CSS. Значения атрибута устанавливаются в пикселях по умолчанию, но они также могут быть в процентах.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <iframe src="https://ru.w3docs.com" width="80%" height="300"></iframe>
  </body>
</html>

Попробуйте сами!

По умолчанию у iframe есть граница вокруг. Чтобы удалить границу, вы можете использовать атрибут style и / или CSS свойство border.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <iframe src="https://ru.w3docs.com" width="80%" height="300" style="border: none"></iframe>
  </body>
</html>

Попробуйте сами!

Атрибуты

Атрибут	Значение	Описание
align	left right top bottom middle	Указывает способ выравнивания и обтекания фрейма текстом. Не поддерживается в HTML5.
allowfullscreen		Определяет, что фрейм может быть открыт в полноэкранном режиме.
frameborder	1 0	Определяет, показывать рамку вокруг фрейма или нет< Не поддерживается в HTML 5.
height	pixels	Задает высоту фрейма (по умолчанию высота 150 pix).
longdesc	URL	Содержит ссылку на подробное описание вложенной во фрейм страницы., Не поддерживается в HTML 5.
marginheight	pixels	Определяет верхнюю и нижнюю границы фрейма. Не поддерживается в HTML 5.
marginwidth	pixels	Определяет левую и правую границы фрейма. Не поддерживается в HTML 5.
name	text	Определяет имя фрейма.
sandbox
		Задает ограничения на контент, загружаемый во фрейме.
	""	применяет все ограничения.
	allow-forms	Разрешает отправку форм на вложенной странице.
	allow-same-origin	Воспринимает вложенный документ как документ загруженный из того же источника, что и родительский документ.
	allow-scripts	Разрешает выполнение скриптов на вложенной странице.
char	allow-top-navigation	Разрешает содержимому вложенного документа доступ к элементам верхнего уровня (документам, окнам).
scrolling	yes no auto	Устанавливает, отображать или нет полосу прокрутки. Не поддерживается в HTML 5.
seamless	seamless	Определяет, что содержимое вложенного документа должно отображаться как часть родительского документа.
src	URL	Указывает адрес документа, содержимое которого будет загружаться во фрейм.
srcdoc	HTML_code	Хранит содержимое фрейма непосредственно в атрибуте.
width	pixels	Задает ширину фрейма. (по умолчанию 300px)