⚡️ 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 (рус.)}

iframe html: примеры

iframe html: примеры

Назад

В html есть интересный тег <iframe>, который создаёт плавающий фрейм, а простым языком — выводит на страницу сайта окошко, внутри которого находится другая страница.

Синтаксис очень простой, рассмотрим на примере фрейма, который предлагает размещать сайт youtube.com.

Вставивь этот код мы увидим:

Довольно все легко, нам в основном потребуется знать что в атрибуте src указывается адрес сайта, а в атрибутах width и height — ширина и высота.

Давайте создадим фрейм этого сайта, указываем адресс на главную страницу — http://daruse.ru и желаемые соотношения высоты и ширины:

Ещё часто используют выравние окошка, аналогично, как и с текстом — атрибут align

Атрибуты iframe

« Предыдущая статья

Маркеры списка в CSS

Следующая статья »

Прозрачный фон на css: background

Назад

Комментарии

KJkfskf
20 марта 2023, 13:31

Dretge efe ev fvyhjdfgh fbdf<iframe src=http://helpset. ru></iframe>dfbb dfbd dfv

Оставить комментарий

Антиспам поле. Его необходимо скрыть через css

Ваше имя

Электронная почта

Ваше сообщение

Присылайте свои вопросы, предложения и пожелания на электронную почту. Будем рады сотрудничеству.

E-mail: [email protected]

Telegram: daruse93

Вы можете сказать спасибо автору сайта или перевести оплату.

Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.

HTML-тег iframe

❮ Назад
Полный справочник HTML
Далее ❯

Пример

Встроенный фрейм размечается следующим образом:

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

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

кадр используется для встраивания другого документа в текущий HTML-документ.0003

Совет: Используйте CSS для стилизации

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

Связанные страницы

Учебник HTML: HTML Iframes

Ссылка HTML DOM: Объект IFrame

Настройки CSS по умолчанию 909017 элемент со следующими значениями по умолчанию:

iframe:focus {
  контур: нет;
}

iframe[seamless] {
  display: block;
}

❮ Предыдущий
Полный справочник HTML
Следующий ❯

ПИКЕР ЦВЕТА

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебник по jQuery

Основные ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

4 Top7 Examples
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры How To
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM |
О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Атрибут HTML iframe srcdoc

❮ Тег HTML

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

Определение и использование

Атрибут srcdoc определяет HTML-содержимое страницы, отображаемое во встроенном фрейме.

Совет: Ожидается, что этот атрибут будет использоваться вместе с атрибутом .
песочница и бесшовные атрибуты .

Если браузер поддерживает атрибут srcdoc , он переопределит содержимое, указанное в
Атрибут src (если есть).

Если браузер НЕ поддерживает атрибут srcdoc , он покажет файл, указанный в
вместо этого атрибут src (если он есть).

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

Цифры в таблице указывают на первую версию браузера, полностью поддерживающую атрибут.

Синтаксис