Тег | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Тег <iframe> создает плавающий фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.
Тег <iframe> является контейнером, содержание которого игнорируется браузерами, не поддерживающими данный тег. Для таких браузеров можно указать альтернативный текст, который увидят пользователи. Он должен располагаться между элементами <iframe> и </iframe>.
Синтаксис
<iframe>...</iframe>
Атрибуты
- align
- Определяет как фрейм будет выравниваться по краю, а также способ обтекания его текстом.
- allowtransparency
- Устанавливает прозрачный фон фрейма, через который виден фон страницы.
- frameborder
- Устанавливает, отображать границу вокруг фрейма или нет.
- height
- Высота фрейма.
- hspace
- Горизонтальный отступ от фрейма до окружающего контента.
- marginheight
Отступ сверху и снизу от содержания до границы фрейма.- marginwidth
- Отступ слева и справа от содержания до границы фрейма.
- name
- Имя фрейма.
- sandbox
- Позволяет задать ряд ограничений на контент загружаемый во фрейме.
- scrolling
- Способ отображения полосы прокрутки во фрейме.
- seamless
- Определяет, что содержимое фрейма должно отображаться так, словно оно является частью документа.
- src
- Путь к файлу, содержимое которого будет загружаться во фрейм.
- srcdoc
- Хранит содержимое фрейма непосредственно в атрибуте.
- vspace
- width
- Ширина фрейма.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Обязателен.
Пример
HTML5IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег IFRAME</title>
</head>
<body>
<iframe src="banner.html" align="left">
Ваш браузер не поддерживает плавающие фреймы!
</iframe>
</body>
</html>
htmlbook.ru
| HTML | WebReference
Элемент <iframe> (от англ. inline frame — встроенный фрейм) создаёт встроенный фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.
<iframe> является контейнером, содержание которого игнорируется браузерами, не поддерживающими данный элемент. Для таких браузеров можно указать альтернативный текст, который увидят пользователи. Он должен располагаться между тегами <iframe> и </iframe>.
Закрывающий тег
Атрибуты
- align
- Определяет, как фрейм будет выравниваться по краю, а также способ обтекания его текстом.
- allowfullscreen
- Разрешает для фрейма полноэкранный режим.
- allowtransparency
- Устанавливает прозрачный фон фрейма, через который виден фон страницы.
- frameborder
- Устанавливает, отображать границу вокруг фрейма или нет.
- height
- Высота фрейма.
- hspace
- Горизонтальный отступ от фрейма до окружающего контента.
- marginheight
- Отступ сверху и снизу от содержания до границы фрейма.
- marginwidth
- Отступ слева и справа от содержимого до границы фрейма.
- name
- Имя фрейма.
- sandbox
- Позволяет задать ряд ограничений на контент загружаемый во фрейме.
- scrolling
- Способ отображения полосы прокрутки во фрейме.
- seamless
- Определяет, что содержимое фрейма должно отображаться так, словно оно является частью документа.
- src
- Путь к файлу, содержимое которого будет загружаться во фрейм.
- srcdoc
- Хранит содержимое фрейма непосредственно в атрибуте.
- vspace
- Вертикальный отступ от фрейма до окружающего контента.
- width
- Ширина фрейма.
Пример
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>IFRAME</title> </head> <body> <iframe src="page/banner.html" align="left"> Ваш браузер не поддерживает встроенные фреймы! </iframe> </body> </html>
Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
×Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 09.10.2018
Редакторы: Влад Мержевич
webref.ru
примеры применения, различии с frame
Элемент
Frames
Что же делает <iframe>?
Как вставить страницу в страницу HTML? Для этого нужно использовать <iframe>, который создает в текущем документе встроенный фрейм, в котором отображается другой HTML-документ.
Отображение
Display block.
Пример кода
<iframe src="https://www.youtube.com/embed/owsfdh5gxyc" frameborder="0" allowfullscreen></iframe>
Еще в старые недобрые времена веб-дизайна было много <frame> элементов, портящих жизнь каждого разработчика. Они почти всегда были плохим подходом к дизайну. К счастью, элемент <frame> был объявлен устаревшим в HTML5. Но <iframe> или «встроенный фрейм» по-прежнему доступен. Будет ли он устаревшим в следующей версии? Может, стоит его избегать? Есть несколько допустимых вариантов использования этого элемента при создании HTML страницы. Но нужно понять, что это такое и как оно работает, чтобы избежать ошибок.
Оба этих элемента позволяют создать отдельный HTML-документ. Ссылка на содержимое документа, на который ссылается текущая веб-страница, указывается в атрибуте src.
<!—Вы можете сделать так --> <iframe src="http://example.com"></iframe> <!—Но вы не можете сделать так --> <iframe> <!DOCTYPE html> <html> <head> . . . </head> <body> . . . </body> </html> </iframe>
Основное различие между <iframe> и <frame> заключается в том, что <iframe> обеспечивает соблюдение правила, о том, что HTML документ в приоритете. Содержимое <iframe> отображается внутри элемента, который является частью текущего документа. В качестве примера рассмотрим это встроенное видео, взятое из YouTube:
<iframe src="https://www.youtube.com/embed/M2kSJbLbIgQ" frameborder="0" allowfullscreen></iframe>
Видео явно на HTML странице, а не на какой-то отдельной панели. элемент сломал эту парадигму и позволил документу осуществлять контроль над окном браузера, разбив его на несколько мелких панелей (фреймов), каждая из которых отображает отдельный документ. Все другие различия между и вытекают из этого основного различия.
Когда-нибудь вам может попасться задача по обновлению старого сайта, который был построен с использованием фреймов. Возможно, вы захотите использовать <iframe> и фиксированную ширину макета, чтобы воссоздать тот же кошмар из независимых панелей и подокон. Но вы не сможете использовать атрибут target, чтобы открыть ссылку в отдельном фрейме. Вы можете начать искать решения на JavaScript. Пожалуйста, не делайте этого.
Существует несколько допустимых вариантов использования <iframe> для создания HTML страницы:
- встраивание стороннего медиа контента;
- встраивание собственного медиа контента через кроссплатформенный документ;
- встраивание примеров кода;
- встраивание сторонних «апплетов» в качестве форм оплаты.
А вот некоторые ужасные варианты использования <iframe>:
- Фотогалерея;
- форум или чат.
Если вам нужно встроить независимые, уже существующие HTML-документы в текущий, используйте <iframe>. Если же вы строите все с нуля, нет никаких причин разбивать дизайн страницы на несколько самостоятельных документов. Особенно если они на самом деле не являются независимыми частями контента.
Название атрибута | Значение | Описание |
sandbox | Allow-same-origin Allow-top-navigation Allow-forms Allow-scripts | Задает ряд ограничений на контент, загружаемый во фрейм. Задается перед тем, как создать HTML страницу. |
scrolling | yes no auto | Определяет показывать скроллы в фрейме или нет. Является устаревшим в HTML5. Вместо него используйте CSS. |
Name | название | Задает имя фрейма. |
Align | left right top middle bottom | Определяет выравнивание фрейма относительно окружающих элементов. Является устаревшим. Вместо него используйте CSS. |
frameborder | yes (или 1) no | Используется для включения отображения границы вокруг фрейма. Является устаревшим в HTML5. Вместо него используйте CSS. |
longdesc | URL | Используется, чтобы указать URL-адрес страницы, которая содержит длинное описание содержания фрейма. Является устаревшим. Вместо него используйте CSS. |
marginwidth | пиксели | Используется для контроля ширины отступа от содержания до границы фрейма. Является устаревшим. Вместо него используйте CSS. |
src | URL | Определяет URL-адрес документа для отображения в IFRAME. |
vspace | пиксели | Устанавливает вертикальные отступы от фрейма до окружающего контента. Является устаревшим. Вместо него используйте CSS. |
width | пиксели % | Определяет ширину фрейма на HTML странице. |
Данная публикация представляет собой перевод статьи «<iframe>» , подготовленной дружной командой проекта Интернет-технологии.ру