Содержание
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.01 | 16.5 Inline frames: the IFRAME element DTD: Transitional |
5.0 | 4.7.2 The iframe element |
5.1 | 4.7.6. The iframe element |
XHTML | |
1.0 | Extensible HyperText Markup Language DTD: Transitional |
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
определяет
встроенный кадр.
Встроенный фрейм используется для встраивания другого документа в текущий документ HTML.
Синтаксис
Попробуйте сами »
С помощью CSS вы также можете изменить размер, стиль и цвет границы iframe:
Пример
Попробуйте сами »
Iframe — цель для ссылки
iframe может использоваться в качестве целевого фрейма для ссылки.
Атрибут цели
ссылки должны ссылаться на атрибут name
iframe:
Пример
Попробуйте сами »
Краткое содержание главы
- Тег HTML
встроенная рамка - Источник
атрибут определяет URL-адрес страницы для встраивания - Всегда включать
(для программ чтения с экрана)
атрибут title - Атрибуты
высота
иширина
определяют
размер iframe - Использовать границу
:нет;
для удаления границы
вокруг iframe
HTML-упражнения
Проверьте себя с помощью упражнений
Упражнение:
Создайте iframe с URL-адресом, который ведет на https://www. w3schools.com.
Начать упражнение
HTML-тег iframe
Тег | Описание |
---|---|
| Определяет встроенный фрейм |
Полный список всех доступных тегов HTML см. в нашем справочнике по тегам HTML.
❮ Предыдущий
Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
3 900
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM |
О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
HTML JavaScript
❮ Назад
Далее ❯
JavaScript делает страницы HTML более динамичными и интерактивными.
Пример
Мой первый JavaScript
Попробуйте сами »
Тег HTML
Попробуйте сами »
Совет: Вы можете узнать больше о JavaScript в нашем Учебнике по JavaScript.
Вкус JavaScript
Вот несколько примеров возможностей JavaScript:
Пример
JavaScript может изменять содержимое:
document.getElementById("demo").innerHTML = "Hello JavaScript!";
Попробуйте сами »
Пример
JavaScript может изменять стили:
document. getElementById("demo").style.fontSize = "25px";
document.getElementById("демо").style.color = "красный";
document.getElementById("демо").style.backgroundColor = "желтый";
Попробуйте сами »
Пример
JavaScript может изменять атрибуты:
document.getElementById("image").src = "picture.gif";
Попробуйте сами »
Тег HTML
<скрипт>
document.("demo").innerHTML = "Hello World!";
скрипт>
тело>
Начать упражнение
Теги сценария HTML
Тег | Описание |
---|---|
<сценарий> | Определяет скрипт на стороне клиента |
| Определяет альтернативный контент для пользователей, не поддерживающих клиентскую часть. скрипты |
Полный список всех доступных тегов HTML см. в нашем справочнике по тегам HTML.
❮ Предыдущий
Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебник по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.