<iframe> HTML

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

<iframe> является контейнером, содержание которого игнорируется браузерами, не поддерживающими данный элемент. Для таких браузеров можно указать альтернативный текст, который увидят пользователи. Он должен располагаться между тегами <iframe> и </iframe>.

Синтаксис

<iframe>...</iframe>

Закрывающий тег обязателен.

WAI ARIA

Нет значения role по-умолчанию.

Допустимые значения role:

  • application
  • document
  • img

Атрибуты

  • allowfullscreen — Разрешает для фрейма полноэкранный режим.
  • height — Высота фрейма.
  • name — Имя фрейма.
  • sandbox — Позволяет задать ряд ограничений на контент загружаемый во фрейме.
  • scrolling — Способ отображения полосы прокрутки во фрейме.
  • seamless — Определяет, что содержимое фрейма должно отображаться так, словно оно является частью документа.
  • src — Путь к файлу, содержимое которого будет загружаться во фрейм.
  • srcdoc — Хранит содержимое фрейма непосредственно в атрибуте.
  • width — Ширина фрейма.

allowfullscreen

Атрибут allowfullscreen разрешает для фрейма полноэкранный режим.

Синтаксис

<iframe allowfullscreen></iframe>

Значения

Нет.

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

По умолчанию этот атрибут выключен.

height

Для изменения размеров фрейма средствами HTML предусмотрены атрибуты width и height. Допускается использовать значения в пикселях или процентах. Если установлена процентная запись, то размеры фрейма вычисляются относительно родительского элемента — контейнера, где находится элемент <iframe>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width="100%" означает, что фрейм будет занимать всю ширину веб-страницы.

Если значение высоты или ширины не заданы, то фрейм автоматически принимает размер 300х150 пикселей.

Синтаксис

<iframe height="<значение>"></iframe>

Значения

Любое целое положительное число в пикселях или процентах.

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

width — 300 пикселей, height — 150 пикселей.

name

В обычном HTML-документе при переходе по ссылке в окне браузера текущий документ заменяется новым. Чтобы направить содержимое во фрейм, он должен иметь уникальное имя, задаваемое атрибутом name. В этом случае при создании ссылки у <a> требуется указать атрибут target, в качестве значения которого выступает имя фрейма.

Синтаксис

<iframe name="<имя>">...</iframe>

Значения

Для указания имени используется набор символов, включая числа и буквы. При обращении к фрейму по имени соблюдайте то же написание, что и в атрибуте name.

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

Нет.

sandbox

Атрибут sandbox позволяет установить ряд ограничений на контент, загружаемый во фрейме, к примеру, блокировать формы и скрипты. Это позволяет повысить безопасность текущего документа, особенно в том случае, когда во фрейм загружается документ из непроверенного источника.

Синтаксис

<iframe src="URL" sandbox="allow-same-origin || allow-top-navigation || allow-forms || allow-scripts"></iframe>

Значения

  • allow-forms — Позволяет содержимому фрейма отправлять формы.
  • allow-modals — Разрешает открытие модальных окон, вроде тех, которые делаются с помощью функции alert в JavaScript.
  • allow-orientation-lock — Позволяет отключать возможность блокировки экрана.
  • allow-pointer-lock — Позволяет фрейму использовать Pointer Lock API.
  • allow-popups — Разрешает всплывающие окна (такие как window.open, target="_blank", showModalDialog).
  • allow-presentation — Разрешает фрейму использовать Presentation API.
  • allow-same-origin — Разрешает загружать содержание фрейма, воспринимая его из того же источника, что и родительский документ. Может использоваться для безопасного открытия контента, блокируя при этом всплывающие окна.
  • allow-scripts — Разрешает запуск и выполнение скриптов. Создание всплывающих окон при этом запрещено.
  • allow-top-navigation — Позволяет открывать ссылки фрейма в родительском документе.

Допустимо писать несколько значений в любом порядке через пробел. Если указано пустое значение, то устанавливаются все возможные ограничения.

При одновременном использовании значений allow-scripts и allow-same-origin, когда исходный и загружаемый документ одного происхождения, атрибут sandbox игнорируется.

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

Нет.

scrolling

Если содержимое фрейма не помещается в отведённые размеры, автоматически появляются полосы прокрутки для просмотра информации. В некоторых случаях, полосы прокрутки нарушают дизайн веб-страницы, поэтому от них можно отказаться. Для управления отображением полос прокрутки используется атрибут scrolling.

Синтаксис

<iframe scrolling="auto | no | yes">...</iframe>

Значения

  • auto — Полосы прокрутки добавляются браузером только по необходимости, в том случае, когда содержимое фрейма превышает его видимую часть.
  • no — Запрещает отображение полос прокрутки.
  • yes — Всегда вызывает появление полос прокрутки, независимо от объёма информации.

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

  • auto

seamless

Устанавливает, что содержимое фрейма должно отображаться так, словно оно является частью документа. При этом соблюдается ряд условий:

  • игнорируется атрибут sandbox, если содержимое фрейма и родительского документа взяты из одного источника;
  • ссылки во фрейме открываются не внутри фрейма, а в текущем документе;
  • стили родительского документа применяются и к содержимому фрейма;
  • фрейм считается блочным элементом, у которого ширина задана как auto;
  • высота формируется автоматически на основе содержимого.

Синтаксис

<iframe seamless></iframe>

Значения

Нет.

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

По умолчанию этот атрибут выключен.

src

Указывает адрес файла, который будет загружаться во фрейм. Это может быть HTML-документ, изображение или серверная программа. Допустимо использовать не только путь к файлу, но также имя функции JavaScript, которое возвращает значение.

Синтаксис

<iframe src="<адрес>">...</iframe>

Значения

В качестве значения принимается полный или относительный путь к файлу.

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

Нет.

srcdoc

Позволяет установить содержимое фрейма непосредственно в атрибуте. Значение должно иметь корректный синтаксис HTML, по желанию содержать <!DOCTYPE> и <html>, а также любое количество пробелов, переносов строк, комментариев и других элементов. При одновременном использовании атрибутов src и srcdoc, атрибут src игнорируется.

Синтаксис

<iframe srcdoc="<html-код>">...</iframe>

Значения

HTML-код содержимого, включая необходимые теги.

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

Нет.

width

Для изменения размеров фрейма средствами HTML предусмотрены атрибуты width и height. Допускается использовать значения в пикселях или процентах. Если установлена процентная запись, то размеры фрейма вычисляются относительно родительского элемента — контейнера, где находится элемент <iframe>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width="100%" означает, что фрейм будет занимать всю ширину веб-страницы.

Если значение высоты или ширины не заданы, то фрейм автоматически принимает размер 300х150 пикселей.

Синтаксис

<iframe height="<значение>"></iframe>

Значения

Любое целое положительное число в пикселях или процентах.

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

width — 300 пикселей, height — 150 пикселей.

Спецификации

Примеры

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>IFRAME</title>
    </head>
    <body>  
        <iframe src="page/banner.html" width="468" height="60" align="left">
            Ваш браузер не поддерживает встроенные фреймы!
        </iframe>
    </body>
</html>