HTML - Iframes

An iframe is an inline frame that allows us to embed another document within the current HTML document. In HTML, the inline frame is defined with the <iframe> tag. This tag creates a rectangular region at specified place within the HTML document in which the browser can display an external document such as a map or another web page.

URL or path of the external document is attached using the src attribute of <iframe> tag. If the content of 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.

Example

Following is the example to show how to use the <iframe> in HTML −

<!DOCTYPE html>
<html>
<head>
   <title>HTML Iframes</title>
</head>
<body>
   <p>It is an example of HTML Iframe</p>
   <iframe src="/html/menu.htm"> Sorry your browser does not support inline frames. </iframe>
</body>
</html>

On executing, the above HTML code will generate an iframe having three links.

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

To set height and width (dimension) of an HTML Iframe, we use the height and width attribute of <iframe> tag.

Example

The following example demonstrates how to set the dimension of an HTML Iframe.

<!DOCTYPE html>
<html>
<head>
   <title>HTML Iframes</title>
</head>
<body>
   <p>Setting Height and width of HTML Iframe </p>
   <iframe src="/html/html_iframes.htm" width="500" height="300"> Sorry your browser does not support inline frames. </iframe>
</body>
</html>

This HTML code will generate an Iframe with the defined dimension.

Iframe for a Hyperlink

To create a target Iframe for a hyperlink, we use the name attribute of <iframe> tag. The value of this attribute is used in the target attribute of elements like <form> and <a> to specify the target frame.

Example

The following example shows how to make a target iframe for a hyperlink.

<!DOCTYPE html>
<html>
<head>
   <title>HTML Iframes</title>
</head>
<body>
   <p>Click on the link below to load the content inside the specified frame...</p>
   <p><a href="/html/html_iframes.htm" target="Iframe">Iframe Tutorial</a></p>
   <iframe style="background-color: skyblue;" name="Iframe" width="500" height="300"> Sorry your browser does not support inline frames. </iframe>
</body>
</html>

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.

Advertisements