Содержание
Тег iframe
HTML5CSS.ru
ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
❮Назад
Полный HTML Ссылки
Дальше ❯
Пример
Встроенный фрейм помечен следующим образом:
<iframe src=»https://html5css.ru»></iframe>
Пример
Встроенный фрейм помечен следующим образом:
<!DOCTYPE HTML>
<html>
<head>
<title>Тег IFRAME</title>
</head>
<body>
<iframe src=»frame_b.htm»>
Ваш браузер не поддерживает плавающие фреймы!
</iframe>
</body>
</html>
Пример
Пример содержания файла frame_b.htm
<html>
<head>
</head>
<body>
<h4>Frame B</h4>
</body>
</html>
Определение и использование
Тег <iframe> определяет встроенный фрейм.
Встроенный фрейм используется для встраивания другого документа в текущий документ HTML.
Поддержка браузера
Элемент | |||||
---|---|---|---|---|---|
<iframe> | Да | Да | Да | Да | Да |
Советы и примечания
Совет: Чтобы иметь дело с обозревателями, не поддерживающими <iframe>, добавьте текст между открывающим тегом <iframe> и закрывающим тегом </iframe>.
Совет: Используйте CSS для стиля <iframe> (даже для включения полосы прокрутки).
Различия между HTML 4,01 и HTML5
HTML5 добавил некоторые новые атрибуты, и несколько атрибутов HTML 4,01 удалены из HTML5.
Различия между HTML и XHTML
В XHTML атрибут name является устаревшим и будет удален. Используйте
атрибут глобального идентификатора Вместо.
Атрибуты
= Новый в HTML5.
Атрибут | Значение | Описание |
---|---|---|
align | left right top middle bottom | Не поддерживается в HTML5.![]() Задает выравнивание <iframe> в соответствии с окружающими элементами |
frameborder | 1 0 | Не поддерживается в HTML5. Указывает, отображать ли рамку вокруг <iframe> |
height | pixels | Задает высоту <iframe> |
longdesc | URL | Не поддерживается в HTML5. Задает страницу, содержащую подробное описание содержимого <iframe> |
marginheight | pixels | Не поддерживается в HTML5. Задает верхние и нижние поля содержимого <iframe> |
marginwidth | pixels | Не поддерживается в HTML5. Задает левое и правое поля содержимого <iframe> |
name | text | Задает имя <iframe> |
sandbox | allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation | Включает дополнительный набор ограничений для содержимого в <iframe> |
scrolling | yes no auto | Не поддерживается в HTML5.![]() Указывает, отображать ли полосы прокрутки в <iframe> |
src | URL | Задает адрес документа для встраивания в <iframe> |
srcdoc | HTML_code | Задает HTML-содержимое страницы, которое должно отображаться в <iframe> |
width | pixels | Задает ширину <iframe> |
Глобальные атрибуты
Тег <iframe> также поддерживает Глобальные атрибуты в HTML.
Атрибуты события
Тег <iframe> также поддерживает Атрибуты событий в HTML.
Похожие страницы
HTML Учебник: HTML Iframes
HTML DOM Ссылки: IFrame Object
Параметры CSS по умолчанию
В большинстве обозревателей элемент <iframe> будет отображаться со следующими значениями по умолчанию:
iframe:focus {
outline: none;
}
iframe[seamless] {
display: block;
}
❮Назад
Полный HTML Ссылки
Дальше ❯
Популярное
html картинка
как вставить картинку в html
цвет текста фона
размер текста html
цвет размер шрифта html
формы html
список html
таблица html
как сделать ссылку в html
html элементы
Copyright 2018-2020 HTML5CSS. ru
Правила и Условия Политика конфиденциальности
О нас
Контакты
— HTML — Дока
- Кратко
- Пример
- Как понять
- Как пишется
- Атрибуты
- Подсказки
- На практике
- Дока Дог советует
Кратко
Секция статьи «Кратко»
<iframe>
— это контейнер, который позволяет вставить любой HTML-документ из другого источника. Часто этот документ интерактивный — например, карта, видео или пост из соцсети.
Этот контейнер обычно называют фреймом. Внешний вид фрейма и его положение на странице можно задать через CSS.
Пример
Секция статьи «Пример»
С помощью такого нехитрого кода мы можем встроить карту размером 560 на 400 пикселей на любую страницу:
<iframe title="Inline Frame Map" frameborder="1" allowfullscreen="true" src="https://yandex.ru/map-widget/v1/-/CBFkaYSE0A"></iframe>
<iframe
title="Inline Frame Map"
frameborder="1"
allowfullscreen="true"
src="https://yandex.
ru/map-widget/v1/-/CBFkaYSE0A"
>
</iframe>
Как понять
Секция статьи «Как понять»
<iframe>
можно представить как «окно» или фрейм, через которое на вашей странице можно увидеть любое содержимое с других сайтов. Это значит, что если карту, видео, пост или другой элемент удалят с оригинального сайта, он пропадёт и с вашей страницы. Останется только пустое место или надпись вроде «Контент недоступен».
Встраивать файлы можно либо по ссылке с помощью атрибута src
, либо целиком HTML-код файла с помощью srcdoc
.
Как пишется
Секция статьи «Как пишется»
Часто сервисы, из которых мы хотим что-то встроить (карты, посты и тому подобное), сами могут сгенерировать вам <iframe>
. Его останется только добавить в свой код.
Контейнер <iframe>
нужно всегда закрывать.
Атрибуты
Секция статьи «Атрибуты»
src
— URL-адрес файла, который вы встраиваете.
srcdoc
— позволяет встроить HTML-код целиком, так что браузеру не придётся подгружать что-то по внешней ссылке. Если используется этот атрибут, то ссылка src
игнорируется.
sandbox
— ограничивает определённые действия и функции встраиваемого документа. Если просто указать атрибут sandbox
, то он применит сразу все возможные ограничения. Либо можно указать нужные ограничения в любом порядке через пробел:
Возможные значения атрибута sandbox
allow
— позволяет отправлять формы внутри- forms <iframe>
.allow
— позволяет открывать модальные окна, которые мы все так не любим: вроде «Оставьте свой имейл» или «Не уходите так быстро! У вас товар в корзине». Обычно эти окна не дают пользоваться сайтом, пока их не закроешь.- modals allow
— позволяет фиксировать горизонтальное или вертикальное положение экрана.- orientation - lock allow
— позволяет пользователю управлять содержимым- pointer - lock <iframe>
с помощью курсора через Pointer Lock API.allow
— разрешает показ всплывающих окон, вызванных с помощью- popups window
,. open ( ) target
или= " _ blank" show
.Modal Dialog ( ) allow
— позволяет содержимому фрейма открывать новые окна. С этим параметром у таких окон не будет тех ограничений, которые есть у- popups - to - escape - sandbox <iframe>
с атрибутомsandbox
.allow
— разрешает использовать Presentation API.- presentation allow
— контент из- same - origin <iframe>
загружается по тем же правилам и с теми же ограничениями, что и страница, на которой он находится.allow
— позволяет загружать скрипты. При этом всплывающие окна будут запрещены.- scripts allow
— позволяет открывать ссылки, которые есть в- top - navigation <iframe>
, в том же окне, в которое встроен фрейм.allow
— позволяет контенту из фрейма управлять страницей, на которой он находится. Но только по инициативе пользователя.- top - navigation - by - user - activation
name
— имя фрейма. Пригодится, чтобы создать ссылку, по которой новая страница будет открываться в нужном фрейме.
Подсказки
Секция статьи «Подсказки»
💡 Атрибут sandbox
будет игнорироваться, если использовать одновременно значения allow
и allow
и если исходная страница и <iframe>
на ней загружаются из одного и того же источника.
💡 Помните, что <iframe>
— этот как будто ещё одна страница, которая загружается внутри вашей страницы. Содержимое фрейма может загружаться дольше, чем ваш сайт.
💡 В <iframe>
стоит добавить атрибут title
на случай, если пользователь не может увидеть страницу и использует инструмент чтения с экрана. Например, так:
<iframe title="Страница в Википедии о лемурах" src="https://ru.wikipedia.org/wiki/Обыкновенные_лемуры"></iframe>
<iframe title="Страница в Википедии о лемурах" src="https://ru.wikipedia.org/wiki/Обыкновенные_лемуры"></iframe>
На практике
Секция статьи «На практике»
Дока Дог советует
Секция статьи «Дока Дог советует»
🛠 Я редко использую <iframe>
. Только когда надо, например, встроить видео с YouTube.
Почти всегда лучше настроить заголовок cross
(это делается на уровне сервера) так, чтобы сторонние сайты не могли встраивать к себе ваш сайт как фрейм — это часто используется для всяких махинаций.
Если вы нашли ошибку, отправьте нам пул-реквест!
Во время отправки формы что-то пошло не так. Попробуйте ещё раз?
←
<video>
alt + ←
→
<source>
alt + →
HTML-тег iframe
❮ Назад
Полный справочник HTML
Далее ❯
Пример
Встроенный фрейм размечается следующим образом:
Попробуйте сами »
Дополнительные примеры «Попробуйте сами» ниже.
Определение и использование
кадр используется для встраивания другого документа в текущий HTML-документ.0003
Совет: Используйте CSS для стилизации
(см. пример ниже).
Совет: Рекомендуется всегда включать заголовок
атрибут для
. Это используется
программами чтения с экрана, чтобы прочитать содержимое
является.
Поддержка браузера
Элемент | |||||
---|---|---|---|---|---|
Да | Да | Да | Да | Да |
Атрибуты
Атрибут | Значение | Описание |
---|---|---|
разрешить | Указывает политику функций для | |
разрешить полный экран | правда ложь | Установите значение true, если |
разрешитьзапрос платежа | правда ложь | Установите значение true, если |
высота | пикселей | Задает высоту |
загрузка | нетерпеливый ленивый | Указывает, должен ли браузер загружать iframe немедленно или отложить загрузку iframe до тех пор, пока не будут выполнены некоторые условия |
имя | текст | Указывает имя |
реферальная политика | без реферера без реферера при переходе на более раннюю версию происхождение происхождение-при-перекрестном происхождении одно и то же происхождение строгое происхождение-при-перекрестном происхождении небезопасный-url | Указывает, какую информацию о реферере отправлять при получение iframe |
песочница | разрешить формы разрешить блокировку указателя разрешить всплывающие окна разрешить то же происхождение разрешить сценарии разрешить верхнюю навигацию | Включает дополнительный набор ограничений для содержимого в |
источник | URL-адрес | Указывает адрес документа для встраивания в |
исходный документ | HTML_код | Указывает HTML-содержимое страницы для отображения в |
ширина | пикселей | Задает ширину |
Глобальные атрибуты
Тег
также поддерживает глобальные атрибуты в HTML.
Атрибуты событий
Тег
также поддерживает атрибуты событий в HTML.
Дополнительные примеры
Пример
Добавление и удаление границ iframe (с помощью 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-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
Использование тега HTML для создания встроенных фреймов: вот как »
В тегах HTML
Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше
- Элемент
- HTML-фреймы устарели в HTML5: вот как сделать их адаптивными
- Что означает
Использование тега HTML для создания встроенных фреймов: вот как это сделать
? - Дисплей
- Блок
Содержание
- 1 Пример кода
- 2 Мощные, но легко неправильно используют
- 2.
1. Как
- 4 Хорошее (и плохое) использование
- 5 Поддержка браузером iframe
- 6 Атрибуты iframe
Пример кода
Мощный, но простой в использовании
В старые недобрые времена веб-дизайна было много
элементов
, висящих вокруг, разрушающих день каждого. Они почти всегда были плохим подходом к дизайну. К счастью,Элемент
устарел в HTML5, ноЧем
Оба элемента представляют собой независимый HTML-документ. На содержимое документа ссылается атрибут
src
каждого элемента, поэтому на самом деле это полностью независимый ресурс, на который ссылается из текущего документа. - 2.