HTML Iframes
An HTML iframe is used to display a web page within a web page.
HTML Iframe Syntax
The HTML <iframe> tag specifies an inline frame.
An inline frame is used to embed another document within the current HTML document.
Syntax
Tip: It is a good practice to always include a title attribute for the <iframe> . This is used by screen readers to read out what the content of the iframe is.
Iframe — Set Height and Width
Use the height and width attributes to specify the size of the iframe.
The height and width are specified in pixels by default:
Example
Or you can add the style attribute and use the CSS height and width properties:
Example
Iframe — Remove the Border
By default, an iframe has a border around it.
To remove the border, add the style attribute and use the CSS border property:
Example
With CSS, you can also change the size, style and color of the iframe’s border:
Example
Iframe — Target for a Link
An iframe can be used as the target frame for a link.
The target attribute of the link must refer to the name attribute of the iframe:
Example
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>
Chapter Summary
- The HTML <iframe> tag specifies an inline frame
- The src attribute defines the URL of the page to embed
- Always include a title attribute (for screen readers)
- The height and width attributes specify the size of the iframe
- Use border:none; to remove the border around the iframe
HTML Exercises
HTML iframe Tag
| Tag | Description |
|---|---|
| <iframe> | Defines an inline frame |
For a complete list of all available HTML tags, visit our HTML Tag Reference.
HTML <iframe> Tag
The <iframe> tag creates an inline frame for embedding third-party content (media, applets, etc.). Although the content of the frame and the web page are independent, they can interact through JavaScript.
Syntax
The <iframe> tag comes in pairs. The content is written between the opening (<iframe>) and closing (</iframe>) tags.
Example of an HTML <iframe> Tag:
To set the size of iframe, use the height and width attributes, or use CSS. The attribute values are set in pixels by default, but they can also be in percent.
Example of an HTML <iframe> Tag With the Height and Width Attributes <!DOCTYPE html>:
By default, an iframe is surrounded by a border. To remove the border, you can use CSS border property.
Example of an HTML <iframe> Tag With the CSS Border Property:
The new loading attribute
There is a new HTML loading attribute that allows deferring image and iframe loading until they are close to being shown. For this feature, the WHATWG has a pull request, and it is already a part of Chromium (as of v76).
Supported values for the loading attribute include:
- «lazy», which defers the load until the image or iframe reaches a distance threshold from the viewport.
- «eager», which loads the resource immediately.
- «auto», which is the default behavior, eagerly load the resource.
You can use the lazy value to take advantage of browser-native lazy loading:
Lazy loading is a set of techniques in web and application development that defers the loading of resources on a page to a later point in time when those resources are needed instead of loading them upfront. These techniques help in improving performance, better utilization of the device’s resources, and reducing associated costs.
Как вставить фрейм в html
In this article, we will know HTML Iframes, their implementation through the examples. The iframe in HTML stands for Inline Frame. The ” iframe ” tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders. An inline frame is used to embed another document within the current HTML document. The HTML iframe name attribute is used to specify a reference for an <Iframe> element. The name attribute is also used as a reference to the elements in JavaScript. The iframe is basically used to show a webpage inside the current web page. The ‘ src ‘ attribute is used to specify the URL of the document that occupies the iframe.
Syntax:
Attributes value: It contains a single value URL that specifies the URL of the document that is embedded in the iframe. There are two types of URL links which are listed below:
- Absolute URL: It points to another webpage.
- Relative URL: It points to other files of the same web page.
Example: This example illustrates the use of an iframe tag which is used to display a webpage inside the current web page.
<iframe>: элемент Inline Frame
<iframe> HTML элемент представляет собой вложенный контекст просмотра , вложение другой HTML — страницу в текущем.
Try it
Каждый встроенный контекст просмотра имеет собственную историю сеансов и документ . Контекст просмотра, в который встроены другие, называется родительским контекстом просмотра . Самый верхний контекст просмотра — тот, у которого нет родителя — обычно является окном браузера, представленным объектом Window .
Предупреждение: поскольку каждый контекст просмотра представляет собой полную среду документа, каждый <iframe> на странице требует увеличения памяти и других вычислительных ресурсов. Хотя теоретически вы можете использовать столько <iframe> , сколько захотите, проверьте, нет ли проблем с производительностью.
| Content categories | Контент потока , фразовый контент , встроенный контент, интерактивный контент, осязаемый контент. |
|---|---|
| Permitted content | None. |
| Tag omission | Нет,и начальная и конечная метки обязательны. |
| Permitted parents | Любой элемент,принимающий встроенный контент. |
| Неявная роль ARIA | Нет соответствующей роли |
| Разрешенные роли АРИА | application , document , img , none , presentation |
| DOM interface | HTMLIFrameElement |
Attributes
Задает политику функции для <iframe> . Политика определяет, какие функции доступны для <iframe> в зависимости от источника запроса (например, доступ к микрофону, камере, батарее, API общего доступа к сети и т. Д.).
Установите значение true , если <iframe> может активировать полноэкранный режим, вызвав метод requestFullscreen() .
Примечание. Этот атрибут считается устаревшим и переопределен как allow=»fullscreen» .
Установите значение true , если <iframe> из разных источников должен быть разрешен для вызова API запроса оплаты .
Примечание. Этот атрибут считается устаревшим и переопределен как allow=»payment» .
Предоставляет подсказку относительного приоритета,который следует использовать при выборке документа iframe.Допустимые значения:
Сигнализирует о высокоприоритетной выборке относительно других документов iframe.
Сигнализирует о низкоприоритетной выборке относительно других документов iframe.
По умолчанию:Сигнализирует об автоматическом определении приоритета выборки относительно других документов iframe.
Высота фрейма в пикселях CSS. По умолчанию 150 .
Указывает,как браузер должен загружать iframe:
- eager : немедленно загрузить iframe, независимо от того, находится ли он за пределами видимого окна просмотра (это значение по умолчанию).
- lazy : откладывать загрузку iframe до тех пор, пока он не достигнет расчетного расстояния от области просмотра, как определено браузером.
Целевое имя для встроенного контекста просмотра. Это можно использовать в атрибуте target элементов <a> , <form> или <base> ; formtarget атрибут <input> или <button> элементов; или параметр 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 <iframe> (например, через Element.removeAttribute() ) вызывает загрузку about:blank во фрейме в Firefox (начиная с версии 65), браузерах на основе Chromium и Safari / iOS.
Встроенный HTML-код для встраивания, переопределив атрибут src . Если браузер не поддерживает атрибут srcdoc , он вернется к URL-адресу в атрибуте src .
Ширина рамки в пикселях CSS. По умолчанию 300 .
Deprecated attributes
Эти атрибуты устарели и могут больше не поддерживаться всеми агентами пользователя.Вы не должны использовать их в новом содержимом и постарайтесь удалить их из существующего содержимого.
Выравнивание этого элемента с учетом окружающего контекста.
Значение 1 (по умолчанию) рисует границу вокруг этого кадра. Значение 0 удаляет границу вокруг этого кадра, но вместо этого вы должны использовать border свойства CSS для управления границами <iframe> .
URL-адрес длинного описания содержимого фрейма.Из-за широко распространенного неправильного использования,это не полезно для невизуальных браузеров.
Количество пространства в пикселях между содержимым рамки и ее верхней и нижней границами.
Количество пространства в пикселях между содержимым рамки и ее левой и правой границами.
Указывает,когда браузер должен предоставить полосу прокрутки для фрейма:
- auto : только если содержимое фрейма больше его размеров.
- yes : всегда показывать полосу прокрутки.
- no : никогда не показывать полосу прокрутки.
Scripting
Встроенные фреймы, как и элементы <frame> , включаются в псевдо-массив window.frames .
С HTMLIFrameElement объекта DOM HTMLIFrameElement сценарии могут получить доступ к объекту window кадрированного ресурса через свойство contentWindow . Свойство contentDocument относится к document внутри <iframe> , так же, как contentWindow.document .
Изнутри фрейма скрипт может получить ссылку на свое родительское окно с помощью window.parent .
Доступ сценария к содержимому фрейма регулируется политикой одинакового происхождения . Сценарии не могут получить доступ к большинству свойств в других объектах window если сценарий был загружен из другого источника, включая сценарии внутри фрейма, обращающиеся к родительскому элементу фрейма. Связь между источниками может быть достигнута с помощью Window.postMessage() .
Позиционирование и масштабирование
В качестве заменяемого элемента положение, выравнивание и масштабирование встроенного документа в блоке элемента <iframe> можно настроить с помощью свойств object-position и object-fit .