Html iframe – Тег | htmlbook.ru

Тег | 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>» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

Отправить ответ

avatar
  Подписаться  
Уведомление о