HTML тег <iframe>

Значение и применение

Тег <iframe> (HTML Inline Frame Element) определяет встроенную в веб-страницу область, которая может отображать содержимое отдельно взятого документа (например, *.pdf), медиа-контента или другого веб-сайта в заданном пространстве. Содержимое внутри области существует независимо от окружающей страницы.

Синтаксис для добавления фрейма:

<iframe src = "URL"> </iframe>, где src атрибут, который определяет местоположение документа или веб-сайта.

Обращаю Ваше внимание, на то что некоторые сайты, например такие как поисковые системы, блокируют возможность размещения страницы сайта во фреймах, либо осуществляют переход по таймеру на свою «реальную» страницу.

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

Тег	Chrome	Firefox	Opera	Safari	IExplorer	Edge
<iframe>	Да	Да	Да	Да	Да	Да

Атрибуты

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

Пример использования

В этом примере мы возьмем в качестве загрузки во фрейм отличный сайт - TinyPng.com, который предоставляет возможность сжимать изображения, предназначенные к загрузке на Ваш сайт. Как правило, удаётся уменьшить размер изображений на 50%, а то и больше, что значительно уменьшает их объем, экономит дисковое пространство и увеличивает скорость загрузки страниц.

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования элемента <iframe></title>
	</head>
	<body>
		<iframe name = "myframe" width = "665px" height = "265px" src = "https://tinypng.com"></iframe><br> <!-- в атрибуте src указываем абсолютный адрес сайта, который хотим открыть во фрейме -->
		<a href = "https://tinypng.com" target = "myframe">TinyPng</a> <!-- указываем, что ссылка откроется во фрейме -->
		<a href = "moscow.jpg" target = "myframe">Moscow</a> <!-- задаем относительный путь к изображению и имя фрейма, где оно откроется -->
		<a href = "paris.jpg" target = "myframe">Paris</a> <!-- задаем относительный путь к изображению и имя фрейма, где оно откроется -->
		<a href = "london.jpg" target = "myframe">London</a> <!-- задаем относительный путь к изображению и имя фрейма, где оно откроется -->
	</body>
</html>

В этом примере мы:

Элементом <iframe> создали фрейм, которому атрибутом name задали имя - "myframe", атрибутом width установили ширину фрейма "665px", а атрибутом height высоту фрейма "265px" . В обязательном атрибуте src указали абсолютный адрес сайта, который хотим открыть во фрейме "https://tinypng.com".
Разместили четыре ссылки, при клике на которые ссылка открывается непосредственно во фрейме (в значении атрибута target указано имя нашего фрейма - "myframe"). Первая ссылка открывает сайт, загруженный изначально, а остальные три загружают различные изображения, находящиеся в той же папке, что и файл с примером.

Результат нашего примера:

Рассмотрим пример добавления видео с YouTube во фрейм:

<!DOCTYPE html>
<html>
	<head>
		<title>Размещение видео с YouTube</title>
	</head>
	<body>
		<p>Размещение видео с YouTube</p>
		<iframe  width = "320" height = "240" src = "https://www.youtube.com/embed/d9TpRfDdyU0?autoplay=1?loop=1&start=28&color=white">
		</iframe>
	</body>
</html>

В этом примере элементом <iframe> мы разместили фрейм на странице и задали для него ширину 320 пикселей (атрибут width) и высоту 240 пикселей (height). В атрибуте src мы указали путь к странице с видео, указали ID видео (выделен курсивом) и добавили дополнительные параметры плеера YouTube (подробное описание доступно в официальной документации):

autoplay = "1" (видео автоматически запускается).
loop = "1" (проигрыватель будет воспроизводить видео по кругу, в бесконечном цикле).
start = "28" (определяет с какой секунды начнется воспроизведение видео, значение длжно быть положительным целым числом).
color = "white" (бегунок просмотренного отмеряет белым цветом, по умолчанию - красным).

Результат нашего примера:

Более подробную информацию о добавлении видео с видео хостинга YouTube вы можете найти на сайте в статье учебника HTML 5 "Размещение видео с видео хостинга YouTube".

Отличия HTML 4.01 от HTML 5

В HTML5 добавлено два новых атрибута, большинство используемых в HTML 4.01 атрибутов было удалено.

Значение CSS по умолчанию

iframe [seamless] {
display: block;
}

iframe:focus {
outline: none;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML теги