Тег <iframe>

Синтаксис

Описание

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

Содержимое внутри тега <iframe> существует независимо от окружающей страницы.

Фреймов на одной веб-странице может быть несколько.

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

Атрибуты

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

Пример

HTML-код:

<!DOCTYPE html>

<head>

<title>Тег iframe</title>

</head>

<body>

<iframe src="https://codefind.ru"></iframe>

</body>

</html>

Отображение в браузере:

Параметры CSS по умолчанию

iframe:focus {
outline: none;
}

iframe[seamless] {
display: block;
}

Поддержка браузера

Элемент	Chrome	Opera	Firefox	Safari	Microsoft Edge
<iframe>	Да	Да	Да	Да	Да

Элемент

Chrome

Opera

Firefox

Safari

Microsoft Edge

Да