HTML - Iframes
HTML - Iframes
HTML iframe is an inline frame that allows you to embed another document within the current HTML document. Whenever you want to display another webpage within the webpage, you can use an iframe.
Creating iframe (Inline Frame)
In HTML, the inline frame is defined with the <iframe> tag . This tag creates a rectangular region at a specified place within the HTML document in which the browser can display an external document such as a map or another web page.
Iframe Syntax
The following is the syntax to create an inline frame (iframe) in HTML:
<iframe src="url" title="description"></iframe>The src Attribute
The URL or path of the external document is attached using the src attribute of the <iframe> tag. If the content of the iframe exceeds the specified rectangular region, HTML automatically includes the scrollbars. HTML allows any number of iframes, but it may affect the performance of the website.
Iframe Example
The following example demonstrates how you can create an iframe in HTML:
The <iframe> Tag Attributes
The following table describe the attributes used with the <iframe> tag.
| S.No. | Attribute & Description |
|---|---|
| 1 | src This attribute is used to give the file name that should be loaded in the frame. Its value can be any URL. For example, src=”/html/top_frame.htm” will load an HTML file available in html directory. |
| 2 | name This attribute allows to give a name to a specific frame. It is used to indicate which frame a document should be loaded into. This is important when you want to create links in one frame that load pages into an another frame, in which case the second frame needs a name to identify itself as the target of the link. |
| 3 | height This attribute specifies the height of <iframe>. By default it is 150 pixels. |
| 4 | width This attribute specifies the width of <iframe>. By default it is 300 pixels. |
| 5 | allow It is used to specify the permission policies to access features like microphone and camera. |
| 6 | loading It specifies the time to load a given iframe. |
Setting Height and Width of Iframes
You can set the height and width of an HTML iframe by using the height and width attributes of the <iframe> tag.
Example
The following example demonstrates how you can set the height and width of an iframe:
The above code will display the ” index.htm ” webpage in an iframe with the specified height and width.
Linking to an Iframe: Target and Name Attributes
You can use an iframe as a target frame to open a webpage on clicking a link.
You can create a target iframe for a link (hyperlink) by using the name attribute of the <iframe> tag. The value of the name attribute is used in the target attribute of elements like <form> and <a> to specify the target frame.
Example
The following example demonstrates how you can make a target iframe for a hyperlink:
On execution, the above code will generate a link and an Iframe with a sky-blue background. When the link is clicked, its content will open inside the iframe.
Styling Iframe
You can also use the style or class attributes to apply the CSS rules on an iframe.
Example
The following example demonstrates how you can apply CSS styles to an iframe:
Multiple Iframes
You can embed multiple documents (webpages) within a webpage. HTML allows you to use multiple <iframe> tags in an HTML document.
Note: Use of multiple iframes may slow down your page loading speed.
Example
In the following example, we are embedding three webpages using multiple iframes: