- HTML Tag
- Syntax
- Example of an HTML Tag:
- Example of an HTML Tag With the Height and Width Attributes :
- Example of an HTML Tag With the CSS Border Property:
- The new loading attribute
- Attributes
- Изображение внутри iframe | HTML
- Резиновая картинка внутри растягивающегося iframe
- Дополнительная страница
- Атрибут srcdoc у iframe
- 4 комментария:
- Html iframe with image
- Кратко
- Пример
- Как понять
- Как пишется
- Атрибуты
- Подсказки
- На практике
- Дока Дог советует
- HTML Iframes
- HTML Iframe Syntax
- Syntax
- Iframe - Set Height and Width
- Example
- Example
- Iframe - Remove the Border
- Example
- Example
- Iframe - Target for a Link
- Example
- Chapter Summary
- HTML Exercises
- HTML iframe Tag
- COLOR PICKER
- Report Error
- Thank You For Helping Us!
HTML Tag
The 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 ) tags.
Example of an HTML Tag:
html> html> head> title>Title of the document title> head> body> iframe src="https://www.w3docs.com"> iframe> body> html>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 Tag With the Height and Width Attributes :
html> html> head> title>Title of the document title> head> body> iframe src="https://www.w3docs.com" width="80%" height="300"> iframe> body> html>By default, an iframe is surrounded by a border. To remove the border, you can use CSS border property.
Example of an HTML Tag With the CSS Border Property:
html> html> head> title>Title of the document title> head> body> iframe src="https://www.w3docs.com" width="80%" height="300" style="border: none"> iframe> body> html>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:
iframe src="video-player.html" loading="lazy">iframe>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.
Attributes
| Attribute | Value | Description |
|---|---|---|
| align | left right top bottom middle | Specifies how text is aligned and wrapped around the frame. Not supported in HTML5. |
| allowfullscreen | Defines that the frame can be opened in a full screen mode. | |
| frameborder | 1 0 | Defines if the iframe border around the frame should be displayed or not. Not supported in HTML 5. |
| height | pixels | Defines the height of the frame (default height 150 pix). |
| longdesc | URL | Defines a page which has a long description of the content. Not supported in HTML 5. |
| marginheight | pixels | Defines the top and bottom margins of the frame. Not supported in HTML 5. |
| marginwidth | pixels | Defines the left and right margins of the frame. Not supported in HTML 5. |
| name | text | Defines the name of the frame. |
| sandbox | ||
| Brings extra restrictions for the content inside the frame. | ||
| «» | Applies all restrictions. | |
| allow-forms | Allows submission of forms or an embedded page. | |
| allow-same-origin | Considers the attached document as a document downloaded from the same source as the parent document. | |
| allow-scripts | Enables execution of scripts on a nested page. | |
| allow-top-navigation | Allows the contents of the attached document to access top-level elements (documents, windows). | |
| scrolling | yes no auto | Defines whether the scroll bar should be displayed or not. Not supported in HTML 5. |
| seamless | seamless | Specifies that the contents of the attached document should be displayed as part of the parent document. |
| src | URL | Specifies the address of the document whose contents will be loaded into the frame. |
| srcdoc | HTML_code | Stores the contents of the frame directly in the attribute. |
| width | pixels | Defines the width of the frame. (default width is 300px). |
Изображение внутри iframe | HTML
Отзывчивый фрейм (изменяется и высота, и ширина) не делает отзывчивым изображение, находящееся в нём (см. в разных браузерах).
.resize < width: 100%; position: relative; padding-top: 56.25%; >.resize iframe marginheight и marginwidth можно убрать отступы до содержимого внутри ифрейма --> Резиновая картинка внутри растягивающегося iframe
Дополнительная страница
На дополнительной странице расположена картинка в теге img (можно применять стили CSS), в iframe — URL дополнительной страницы.
Атрибут srcdoc у iframe
Атрибут srcdoc поддерживается не всеми браузерами (нет IE). Он позволяет задавать содержимое фрейма в атрибуте. При его наличии, атрибут src игнорируется.
.resize < width: 100%; position: relative; padding-top: 56.25%; >.resize iframe
.resize < width: 100%; position: relative; padding-top: 56.25%; >.resize iframe
4 комментария:
Unknown скажите, а зачем картинку пихать в iframe? приведите пример такой ситуации NMitra Универсальная галерея для видео и картинок (это не моя идея, люди интересуются). Я подумала об iframe (меняешь URL и радуешься). Но с картинками вышла загвоздка. Дядя Женя Наталья, расскажите как встроить счётчик ливнет в код шаблона, в любое место, например в подвал, БЕЗ использования "Добавить гаджет" NMitra А в чём заключается трудность (не помню, есть ли там какие-то особенности)? У вас шаблон переработан и место для футера не определено. Можете добавить дополнительный div с кодом из http://www.liveinternet.ru/add после
Я на Метрику подсела, не мониторю произошли ли в Liveinternet какие-то изменения
Html iframe with image
Мы встроили одну страницу в другую страницу, чтобы ты смотрел страницу пока смотришь страницу.
Время чтения: меньше 5 мин
Обновлено 8 сентября 2022
Кратко
Скопировать ссылку "Кратко" Скопировано
— это контейнер, который позволяет вставить любой HTML-документ из другого источника. Часто этот документ интерактивный — например, карта, видео или пост из соцсети.
Этот контейнер обычно называют фреймом. Внешний вид фрейма и его положение на странице можно задать через CSS.
Пример
Скопировать ссылку "Пример" Скопировано
С помощью такого нехитрого кода мы можем встроить карту размером 560 на 400 пикселей на любую страницу:
title="Inline Frame Map" width="560" height="400" frameborder="1" allowfullscreen="true" src="https://yandex.ru/map-widget/v1/-/CBFkaYSE0A">iframe id="inlineFrameExample" title="Inline Frame Map" width="560" height="400" frameborder="1" allowfullscreen="true" src="https://yandex.ru/map-widget/v1/-/CBFkaYSE0A" > iframe>
Как понять
Скопировать ссылку "Как понять" Скопировано
можно представить как «окно» или фрейм, через которое на вашей странице можно увидеть любое содержимое с других сайтов. Это значит, что если карту, видео, пост или другой элемент удалят с оригинального сайта, он пропадёт и с вашей страницы. Останется только пустое место или надпись вроде «Контент недоступен».
Встраивать файлы можно либо по ссылке с помощью атрибута src , либо целиком HTML-код файла с помощью srcdoc .
Как пишется
Скопировать ссылку "Как пишется" Скопировано
Часто сервисы, из которых мы хотим что-то встроить (карты, посты и тому подобное), сами могут сгенерировать вам . Его останется только добавить в свой код.
Контейнер . . . < / iframe>нужно всегда закрывать.
Атрибуты
Скопировать ссылку "Атрибуты" Скопировано
src — URL-адрес файла, который вы встраиваете.
srcdoc — позволяет встроить HTML-код целиком, так что браузеру не придётся подгружать что-то по внешней ссылке. Если используется этот атрибут, то ссылка src игнорируется.
sandbox — ограничивает определённые действия и функции встраиваемого документа. Если просто указать атрибут sandbox , то он применит сразу все возможные ограничения. Либо можно указать нужные ограничения в любом порядке через пробел:
Возможные значения атрибута sandbox
- allow - forms — позволяет отправлять формы внутри .
- allow - modals — позволяет открывать модальные окна, которые мы все так не любим: вроде «Оставьте свой имейл» или «Не уходите так быстро! У вас товар в корзине». Обычно эти окна не дают пользоваться сайтом, пока их не закроешь.
- allow - orientation - lock — позволяет фиксировать горизонтальное или вертикальное положение экрана.
- allow - pointer - lock — позволяет пользователю управлять содержимым с помощью курсора через Pointer Lock API.
- allow - popups — разрешает показ всплывающих окон, вызванных с помощью window . open ( ) , target = " _ blank" или show Modal Dialog ( ) .
- allow - popups - to - escape - sandbox — позволяет содержимому фрейма открывать новые окна. С этим параметром у таких окон не будет тех ограничений, которые есть у с атрибутом sandbox .
- allow - presentation — разрешает использовать Presentation API.
- allow - same - origin — контент из загружается по тем же правилам и с теми же ограничениями, что и страница, на которой он находится.
- allow - scripts — позволяет загружать скрипты. При этом всплывающие окна будут запрещены.
- allow - top - navigation — позволяет открывать ссылки, которые есть в , в том же окне, в которое встроен фрейм.
- allow - top - navigation - by - user - activation — позволяет контенту из фрейма управлять страницей, на которой он находится. Но только по инициативе пользователя.
name — имя фрейма. Пригодится, чтобы создать ссылку, по которой новая страница будет открываться в нужном фрейме.
Подсказки
Скопировать ссылку "Подсказки" Скопировано
💡 Атрибут sandbox будет игнорироваться, если использовать одновременно значения allow - scripts и allow - same - origin и если исходная страница и на ней загружаются из одного и того же источника.
💡 Помните, что — этот как будто ещё одна страница, которая загружается внутри вашей страницы. Содержимое фрейма может загружаться дольше, чем ваш сайт.
💡 В стоит добавить атрибут title на случай, если пользователь не может увидеть страницу и использует инструмент чтения с экрана. Например, так:
iframe title="Страница в Википедии о лемурах" src="https://ru.wikipedia.org/wiki/Обыкновенные_лемуры">iframe>
На практике
Скопировать ссылку "На практике" Скопировано
Дока Дог советует
Скопировать ссылку "Дока Дог советует" Скопировано
🛠 Я редко использую . Только когда надо, например, встроить видео с YouTube.
Почти всегда лучше настроить заголовок cross - origin (это делается на уровне сервера) так, чтобы сторонние сайты не могли встраивать к себе ваш сайт как фрейм — это часто используется для всяких махинаций.
HTML Iframes
An HTML iframe is used to display a web page within a web page.
HTML Iframe Syntax
The HTML 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 . 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
Chapter Summary
- The HTML 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
For a complete list of all available HTML tags, visit our HTML Tag Reference.
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.