Posted:
Фев 14, 2023
Comments:
0 Comments

Iframe в html: что это за HTML-тег в коде, примеры использования

HTML/Элемент iframe

Синтаксис

(X)HTML

<iframe src="..."> ... </iframe>

Описание

Элемент iframe (от англ. «inline frame» ‒ «встроенный фрейм») встраивает «плавающий» фрейм в HTML документ.

Примечание

Данный элемент создаёт в документе прямоугольную область обрамлённую рамкой, в которую загружается внешний документ. При активации ссылки во встроенном фрейме, документ загружается в этот же фрейм.

Для браузеров не поддерживающих «плавающие» фреймы в элемент iframe вкладывается соответствующий текст предупреждения. Например, «Ваш веб-браузер не поддерживает фреймы».

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

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

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

Верс.Раздел
HTML
2.0—
3.2—
4.0116.5 Inline frames: the IFRAME element
DTD:
Transitional
Strict
Frameset
5.04.7.2 The iframe element
5.14.7.6. The iframe element
XHTML
1.0Extensible HyperText Markup Language
DTD:
Transitional
Strict
Frameset
1. 1—

Атрибуты

align
Задаёт выравнивание фреймов в документе, в том числе его обтекание текстом.
allowfullscreen
Разрешает использование функции полноэкранного режима.
frameborder
Указывает отображать или не отображать рамку вокруг фрейма.
height
Задаёт высоту фрейма.
longdesc
Указывает URL-адрес страницы содержащей полное описание содержимого фрейма.
marginheight
Устанавливает высоту верхнего и нижнего отступа от границы фрейма до его содержимого.
marginwidth
Устанавливает размер левого и правого отступа от границы фрейма до его содержимого.
name
Задаёт фрейму уникальное имя.
sandbox
Устанавливает набор ограничений для содержимого фрейма.
scrolling
Указывает отображать или нет полосы прокрутки (scrollbar) в фрейме.
seamless
Указывает, что содержимое фрейма должно выглядеть так, как будто оно является частью основного документа.
src
Указывает URL-адрес документа, который должен быть загружен во фрейм.
srcdoc
HTML-код документа, который должен быть отображён во фрейме.
width
Задаёт ширину фрейма.
Глобальные атрибуты
accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

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

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Элемент iframe</title>
</head>
<body>
<h2>Пример с элементом «iframe»</h2>
<iframe src=»/html/i/»>Ваш браузер не поддерживает плавающие фреймы. </iframe>
</body>
</html>

Элемент iframe

⚡️ HTML и CSS с примерами кода

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

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

Изображения и мультимедиа

  • area
  • audio
  • img
  • figcaption
  • figure
  • map
  • track
  • video
  • embed
  • iframe
  • object
  • param
  • picture
  • source

Синтаксис

<iframe>. ..</iframe>

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

Атрибуты

allow
Определяет политику элемента
allowfullscreen
Разрешает для фрейма полноэкранный режим. Этот атрибут считается устаревшим атрибутом и переопределяется как allow="fullscreen".
allowpaymentrequest
Установите в значение true, если нужно разрежить вызывать функции API платежей. Этот атрибут считается устаревшим атрибутом и переопределяется как allow="payment".
height
Высота фрейма.
name
Имя фрейма.
referrerpolicy
Указывает, какой реферер отправить при получении ресурса фрейма
sandbox
Позволяет задать ряд ограничений на контент загружаемый во фрейме.
scrolling
Способ отображения полосы прокрутки во фрейме.
seamless
Определяет, что содержимое фрейма должно отображаться так, словно оно является частью документа.
src
Путь к файлу, содержимое которого будет загружаться во фрейм.
srcdoc
Хранит содержимое фрейма непосредственно в атрибуте.
width
Ширина фрейма.

allowfullscreen

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

Синтаксис

<iframe allowfullscreen></iframe>

Значения

Нет.

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

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

height

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

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

Синтаксис

<iframe></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></iframe>

Значения

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

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

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

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

  • Referrer Policy
  • WHATWG HTML Living Standard
  • HTML5
  • HTML 4. 01 Specification
  • Screen Orientation API
  • Presentation API

Описание и примеры

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

Ссылки

  • Тег <iframe> MDN (рус.)

фреймов HTML

❮ Назад
Далее ❯

HTML iframe используется для отображения веб-страницы внутри веб-страницы.

Синтаксис HTML Iframe

Тег HTML

Совет: Рекомендуется всегда включать код
Атрибут title для

Попробуйте сами »

Или вы можете добавить атрибут в стиле и использовать
CSS высота и ширина
свойства:

Пример

Попробуйте сами »

Iframe — удаление границы

По умолчанию iframe имеет рамку вокруг себя.

Чтобы удалить границу, добавьте атрибут стиля и используйте CSS
border свойство:

Пример

Попробуйте сами »

С помощью CSS вы также можете изменить размер, стиль и цвет границы iframe:

Пример

Попробуйте сами »

Iframe — цель для ссылки

iframe может использоваться в качестве целевого фрейма для ссылки.

Атрибут цели
ссылки должны ссылаться на атрибут name iframe:

Пример

W3Schools.com

Попробуйте сами »

Краткое содержание главы

  • Тег HTML

    Начать упражнение

    HTML-тег iframe

    Тег Описание