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
marginheight и marginwidth можно убрать отступы до содержимого внутри ифрейма -->
Резиновая картинка внутри растягивающегося iframe
Дополнительная страница
На дополнительной странице расположена картинка в теге img (можно применять стили CSS), в iframe — URL дополнительной страницы.
Атрибут srcdoc у iframe
Атрибут srcdoc поддерживается не всеми браузерами (нет IE). Он позволяет задавать содержимое фрейма в атрибуте. При его наличии, атрибут src игнорируется.
Unknown скажите, а зачем картинку пихать в iframe? приведите пример такой ситуации NMitra Универсальная галерея для видео и картинок (это не моя идея, люди интересуются). Я подумала об iframe (меняешь URL и радуешься). Но с картинками вышла загвоздка. Дядя Женя Наталья, расскажите как встроить счётчик ливнет в код шаблона, в любое место, например в подвал, БЕЗ использования "Добавить гаджет" NMitra А в чём заключается трудность (не помню, есть ли там какие-то особенности)? У вас шаблон переработан и место для футера не определено. Можете добавить дополнительный div с кодом из http://www.liveinternet.ru/add после
Я на Метрику подсела, не мониторю произошли ли в Liveinternet какие-то изменения
The HTML <frame> tag defines a frame or a section in a web page, within the <frameset> tag. Every single <frame> can have its own attributes like scrolling, borders etc. You can show different pages separately in different frames. Similarly, you can show multiple images inside multiple <frame> tags within a single <frameset>.
Note: HTML5 does not support <frame> and <frameset> tag.
It is not a very popular element to use these days, you can still use the <frame> tag in your web page to show multiple images of different size separately.
Show images in two separate frames
For example, I have two images with different size (width and height) and I want to show the images using the <frame> tag. This is how I’ll do it.
First, I have defined the <frameset> tag and used the cols attribute to specify the number and size of columns. Since the first image is smaller, I have set 20% (pixel) and 50% for the second.
Note: Don’t use the <frameset> tag inside the <body> tag.
The second <frame> tag has scrolling attribute, with value "yes". The frame will show the scroll bars, since the image is big.
Below is a list of other attributes that you can use with <frame> tag.
• src: This is required (compulsory). The value is the the Url of the image (or a web page, an object etc.) that you want to show in the frame.
• frameborder: To add or remove borders in the frames. The value for this attribute can be 0 or 1 . You can also use yes (for 1) or no (for 0). Set the value as 1 (or yes) if you want to show the border on the frames. For example,
• scrolling: You can use yes, no or auto values to show the scrollbars in a frame.
• name: Specify a name to the frame. For example,
<frame src="https://www.encodedna.com/images/theme/javascript.png" name ="frm_first">
• noresize: Use this attribute if you want to restrict the frames from resizing. By default you can resize the frame. However, you can prevent the frame from resizing like this.
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> iframesrc="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> iframesrc="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> iframesrc="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:
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).
