Элемент (от англ. inline frame — встроенный фрейм) создаёт встроенный фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.
Синтаксис
Атрибуты
allowfullscreen Разрешает для фрейма полноэкранный режим. height Высота фрейма. name Имя фрейма. sandbox Позволяет задать ряд ограничений на контент загружаемый во фрейме. src Путь к файлу, содержимое которого будет загружаться во фрейм. srcdoc Хранит содержимое фрейма непосредственно в атрибуте. width Ширина фрейма.
Также для этого элемента доступны универсальные атрибуты и события.
Устаревшие атрибуты
align Определяет, как фрейм будет выравниваться по краю, а также способ обтекания его текстом. frameborder Устанавливает, отображать границу вокруг фрейма или нет. hspace Горизонтальный отступ от фрейма до окружающего контента. marginheight Отступ сверху и снизу от содержания до границы фрейма. marginwidth Отступ слева и справа от содержимого до границы фрейма. scrolling Способ отображения полосы прокрутки во фрейме. vspace Вертикальный отступ от фрейма до окружающего контента.
YouTube 60FPS Lagging & Dropped Frames on Google Chrome — QUICK FIX!
Пример
IFRAME
Спецификация
| HTML Living Standard | Живой стандарт |
| HTML 4.01 Specification | Заменённая рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
| 4 | 12 | 1 | 10 | 4 | 1 |
| 4.4 | 4 | 14 | 3.2 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
- Адаптивное встраивание
- Добавление медиа-контента
- Отзывчивый веб-дизайн
- Отправка данных формы
Источник: webref.ru
Youtube frame что это
Встроенный фрейм
- Категории: Потоковое содержимое, Фразовое содержимое, Встроенное содержимое, Интерактивное содержимое
- Контекст: Где ожидается встроенный контент.
- Модель: Без содержимого.
Тег (сокращение от «inline frame» — встроенный фрейм) позволяет вставить в документ независимое окно и загрузить туда другой документ. Чаще фреймы используются для вставки сторонних компонентов, виджетов и т.д. Некоторые сайты запрещают использовать их во фрейме. В этом случае вы увидите предупреждение от браузера.
Атрибуты
- Глобальные атрибуты
- src — адрес ресурса
- srcdoc — документ для рендеринга в iframe
- name — имя вложенного контекста
- sandbox — правила безопасности для вложенного контента
- allowfullscreen — разрешается ли использовать полноэкранный режим
- allowpaymentrequest — разрешено ли выполнение платежных запросов
- width — горизонтальный размер
- height — вертикальный размер
Источник: codequest.ru
: элемент Inline Frame
HTML элемент представляет собой вложенный контекст просмотра , вложение другой HTML — страницу в текущем.
Try it
Каждый встроенный контекст просмотра имеет собственную историю сеансов и документ . Контекст просмотра, в который встроены другие, называется родительским контекстом просмотра . Самый верхний контекст просмотра — тот, у которого нет родителя — обычно является окном браузера, представленным объектом Window .
Предупреждение: поскольку каждый контекст просмотра представляет собой полную среду документа, каждый на странице требует увеличения памяти и других вычислительных ресурсов. Хотя теоретически вы можете использовать столько , сколько захотите, проверьте, нет ли проблем с производительностью.
| Контент потока , фразовый контент , встроенный контент, интерактивный контент, осязаемый контент. |
| None. |
| Нет,и начальная и конечная метки обязательны. |
| Любой элемент,принимающий встроенный контент. |
| Нет соответствующей роли |
| application , document , img , none , presentation |
| HTMLIFrameElement |
Attributes
Задает политику функции для . Политика определяет, какие функции доступны для в зависимости от источника запроса (например, доступ к микрофону, камере, батарее, API общего доступа к сети и т. Д.).
Установите значение true , если может активировать полноэкранный режим, вызвав метод requestFullscreen() .
Примечание. Этот атрибут считается устаревшим и переопределен как allow=»fullscreen» .
allowpaymentrequest Experimental
Установите значение true , если из разных источников должен быть разрешен для вызова API запроса оплаты .
Примечание. Этот атрибут считается устаревшим и переопределен как allow=»payment» .
csp Experimental
Предоставляет подсказку относительного приоритета,который следует использовать при выборке документа iframe.Допустимые значения:
Сигнализирует о высокоприоритетной выборке относительно других документов iframe.
Сигнализирует о низкоприоритетной выборке относительно других документов iframe.
По умолчанию:Сигнализирует об автоматическом определении приоритета выборки относительно других документов iframe.
Высота фрейма в пикселях CSS. По умолчанию 150 .
Указывает,как браузер должен загружать iframe:
- eager : немедленно загрузить iframe, независимо от того, находится ли он за пределами видимого окна просмотра (это значение по умолчанию).
- lazy : откладывать загрузку iframe до тех пор, пока он не достигнет расчетного расстояния от области просмотра, как определено браузером.
Целевое имя для встроенного контекста просмотра. Это можно использовать в атрибуте target элементов , или ; formtarget атрибут или элементов; или параметр windowName в методе window.open() .
Указывает, какой реферер отправлять при выборке ресурса кадра:
- no-referrer : заголовок Referer не будет отправлен.
- no-referrer-when-downgrade : заголовок Referer не будет отправлен в origin без TLS ( HTTPS ).
- origin : отправленный реферер будет ограничен источником ссылающейся страницы: ее схемой , хостом и портом .
- origin-when-cross-origin : реферер, отправленный в другие источники, будет ограничен схемой, хостом и портом. Навигация по тому же источнику по-прежнему будет включать путь.
- same-origin : реферер будет отправлен для того же источника , но запросы на другой источник не будут содержать никакой информации о реферере.
- strict-origin : отправляйте источник документа в качестве реферера только тогда, когда уровень безопасности протокола остается прежним (HTTPS→HTTPS), но не отправляйте его в менее безопасное место назначения (HTTPS→HTTP).
- strict-origin-when-cross-origin (по умолчанию): отправлять полный URL-адрес при выполнении запроса того же источника, отправлять источник только при неизменном уровне безопасности протокола (HTTPS→HTTPS) и не отправлять заголовок менее безопасное место назначения (HTTPS→HTTP).
- unsafe-url : реферер будет включать источник и путь (но не фрагмент , пароль или имя пользователя ). Это значение небезопасно , поскольку оно приводит к утечке источников и путей от ресурсов, защищенных TLS, к небезопасным источникам.
Применяет дополнительные ограничения к содержимому фрейма.Значение атрибута может быть либо пустым для применения всех ограничений,либо разделенными пробелами лексемами для снятия определенных ограничений:
- allow-downloads-without-user-activation Experimental : позволяет выполнять загрузку без жеста пользователя.
- allow-downloads : разрешает загрузку выполнять жестом пользователя.
- allow-forms : позволяет ресурсу отправлять формы. Если это ключевое слово не используется, отправка формы блокируется.
- allow-modals : позволяет ресурсу открывать модальные окна .
- allow-orientation-lock : позволяет ресурсу блокировать ориентацию экрана .
- allow-pointer-lock : позволяет ресурсу использовать API блокировки указателя .
- allow-popups : разрешает всплывающие окна (например, window.open() , target=»_blank» или showModalDialog() ). Если это ключевое слово не используется, всплывающее окно не откроется.
- allow-popups-to-escape-sandbox : позволяет изолированному документу открывать новые окна без наследования этих окон изолированной программной среды. Например, это может безопасно изолировать рекламу, не накладывая тех же ограничений на страницу, на которую ссылается объявление.
- allow-presentation : позволяет ресурсу начать сеанс презентации .
- allow-same-origin : если этот токен не используется, ресурс считается происходящим из особого источника, который всегда не соответствует политике одного и того же происхождения (потенциально предотвращая доступ к хранилищу данных / файлам cookie и некоторым API JavaScript).
- allow-scripts : разрешает запускать сценарии ресурса (но не создавать всплывающие окна).
- allow-storage-access-by-user-activation Experimental : позволяет ресурсу запрашивать доступ к возможностям родительского хранилища с помощью API доступа к хранилищу .
- allow-top-navigation : позволяет ресурсу перемещаться по контексту просмотра верхнего уровня (тот, который называется _top ).
- allow-top-navigation-by-user-activation : позволяет ресурсу перемещаться по контексту просмотра верхнего уровня, но только если это инициируется жестом пользователя.
Note:
- Когда встроенный документ имеет то же происхождение, что и страница встраивания, настоятельно не рекомендуется использовать оба allow-scripts и allow-same-origin , так как это позволяет встроенному документу удалить атрибут sandbox , что делает его не более безопасным, чем отказ от использования атрибут sandbox вообще.
- Песочница бесполезна, если злоумышленник может отображать контент за пределами изолированного iframe , например, если зритель открывает фрейм в новой вкладке. Такой контент также должен обслуживаться из отдельного источника , чтобы ограничить возможный ущерб.
- sandbox атрибут не поддерживается в Internet Explorer 9 и более ранних версий.
URL-адрес страницы для встраивания. Используйте значение about:blank , чтобы вставить пустую страницу, соответствующую политике одного и того же происхождения . Также обратите внимание, что программное удаление атрибута src (например, через Element.removeAttribute() ) вызывает загрузку about:blank во фрейме в Firefox (начиная с версии 65), браузерах на основе Chromium и Safari / iOS.
Встроенный HTML-код для встраивания, переопределив атрибут src . Если браузер не поддерживает атрибут srcdoc , он вернется к URL-адресу в атрибуте src .
Ширина рамки в пикселях CSS. По умолчанию 300 .
Deprecated attributes
Эти атрибуты устарели и могут больше не поддерживаться всеми агентами пользователя.Вы не должны использовать их в новом содержимом и постарайтесь удалить их из существующего содержимого.
Выравнивание этого элемента с учетом окружающего контекста.
Значение 1 (по умолчанию) рисует границу вокруг этого кадра. Значение 0 удаляет границу вокруг этого кадра, но вместо этого вы должны использовать border свойства CSS для управления границами .
URL-адрес длинного описания содержимого фрейма.Из-за широко распространенного неправильного использования,это не полезно для невизуальных браузеров.
Количество пространства в пикселях между содержимым рамки и ее верхней и нижней границами.
Количество пространства в пикселях между содержимым рамки и ее левой и правой границами.
Указывает,когда браузер должен предоставить полосу прокрутки для фрейма:
- auto : только если содержимое фрейма больше его размеров.
- yes : всегда показывать полосу прокрутки.
- no : никогда не показывать полосу прокрутки.
Scripting
Изнутри фрейма скрипт может получить ссылку на свое родительское окно с помощью window.parent .
Доступ сценария к содержимому фрейма регулируется политикой одинакового происхождения . Сценарии не могут получить доступ к большинству свойств в других объектах window если сценарий был загружен из другого источника, включая сценарии внутри фрейма, обращающиеся к родительскому элементу фрейма. Связь между источниками может быть достигнута с помощью Window.postMessage() .
Позиционирование и масштабирование
В качестве заменяемого элемента положение, выравнивание и масштабирование встроенного документа в блоке элемента можно настроить с помощью свойств object-position и object-fit .
Examples
Простой
В этом примере страница https://example.org встраивается в iframe.
HTML
iframe src=»https://example.org» title=»iframe Example 1″ width=»400″ height=»300″> iframe>
Result
Accessibility concerns
Люди, использующие вспомогательные технологии, такие как программы чтения с экрана, могут использовать атрибут title в , чтобы пометить его содержимое. Значение заголовка должно кратко описывать встроенный контент:
iframe title=»Wikipedia page for Avocados» src=»https://en.wikipedia.org/wiki/Avocado»> iframe>
Без этого заголовка они должны перейти в , чтобы определить, что это за встроенное содержимое. Этот сдвиг контекста может сбивать с толку и отнимать много времени, особенно для страниц с несколькими и / или если встраиваемые файлы содержат интерактивный контент, такой как видео или аудио.
HTML
: HTML-документ / корневой элемент
Элемент представляет корневой (верхний уровень документа, поэтому его также называют Этот элемент включает глобальные атрибуты.
: элемент Idiomatic Text
HTML-элемент представляет собой диапазон текста, который по какой-либо причине отличается от обычного, такие как идиоматические технические термины, таксономические обозначения,
Источник: runebook.dev