HTML тег <iframe>

HTML теги

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

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

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

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

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


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

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

Атрибуты

АтрибутЗначениеОписание
alignleft
right
top
middle
bottom
Не поддерживается в HTML5.
Определяет выравнивание элемента в соответствии с окружающими элементами.
frameborder0
1
Не поддерживается в HTML5.
Указывает, следует ли отображать рамку вокруг элемента.
heightpixelsОпределяет высоту элемента.
longdescURLНе поддерживается в HTML5.
Указывает страницу, содержащую длинное описание содержания элемента.
marginheightpixelsНе поддерживается в HTML5.
Отступ сверху и снизу от содержания до границы фрейма.
marginwidthpixelsНе поддерживается в HTML5.
Указывает отступ слева и справа от содержания до границы фрейма.
nametextЗадаёт имя элемента.
sandboxhtml5allow-forms
allow-pointer-lock
allow-popups
allow-same-origin
allow-scripts
allow-top-navigation
Включает дополнительный набор ограничений для содержания в элементе.
scrollingauto
yes
no
Не поддерживается в HTML5.
Указывает, отображать или нет полосы прокрутки в элементе.
srcURLОпределяет адрес документа для встраивания в элемент.
srcdochtml5HTML_codeУказывает HTML-код, который будет показан во фрейме.
widthpixelsОпределяет ширину элемента.

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

В этом примере мы возьмем в качестве загрузки во фрейм отличный сайт - 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>

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

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

Пример использования фреймов в HTML.
Пример использования фреймов в HTML.

Рассмотрим пример добавления видео с 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 (подробное описание доступно в официальной документации):

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

Добавление видео с YouTube во фрейм.
Добавление видео с YouTube во фрейм.

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

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

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

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

iframe [seamless] {
display: block;
}

iframe:focus {
outline: none;
}

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

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

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

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

HTML теги