In This Tutorial
HTML iframes
The HTML iframe tag is used to embed or include another document within the current web page.
This is quite useful, especially if you want to integrate a web page from another website. You can include a web page from the current domain as well.
How to use the iframe tag?
This is how you may create an iframe in your website:
<iframe src=”web page address”></iframe>
Where src specifies the other page to be embedded. Many popular browsers support the iframes while a few do not. In case a browser does not support the iframe, you may give some text message to the users before the closing tag </iframe> like this:
<iframe src=”web page address”>Your browser does not support iframe</iframe>
Note: A few of the iframe attributes are not supported in HTML5, as mentioned below.
Examples of using the iframes
Following are a few examples of using the iframes in HTML documents. Examples with different iframe attributes like border, height, width, scrolling etc. are also included with the iframe code.
A basic iframe example
The example simply includes a document by using the iframe HTML tag.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html>
<head>
<title>iframe example</title>
</head>
<body>
<p>This example show using iframe</p>
<iframe src=“https://www.tutorialscollection.com/font-family-using-font-family-in-html/”></iframe>
</body>
</html>
|
An iframe height and width example
The following example shows how to use the height and width attributes of the HTML iframe to define the iframe size for the embedded document. The height and width are specified in the pixels from the HTML 5 version. In the earlier versions, you could define it in the % as well.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html>
<head>
<title>iframe example</title>
</head>
<body>
<p>This example show using iframe</p>
<iframe src=“https://www.tutorialscollection.com/font-family-using-font-family-in-html/” height=“300” width=“300”></iframe>
</body>
</html>
|
You can set auto height by using the JavaScript in the head tag for iframes.
The iframe border example
You can specify the iframe border by using the frameborder attribute in the iframe tag. It has two values; 0 means no border and 1 for having the border for the iframe.
Note that, the frameborder attribute is deprecated in HTML 5. You can use seamless property that results in an iframe without the borders and scrollbars. However, the seamless property is not supported in all major browsers as of today.
The example below uses the frameborder attribute for an iframe with no border.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html>
<head>
<title>HTML iframe example</title>
</head>
<body>
<p>This example show using iframe</p>
<iframe src=“https://www.tutorialscollection.com/font-family-using-font-family-in-html/” height=“300” width=“300” frameborder=“0”></iframe>
</body>
</html>
|
Iframe scrolling example
The scrolling attribute of the iframe specifies whether to scroll the document inside the iframe if required. By default, the value is set to “auto”, that means the scrollbars will appear if embedded document is larger than the iframe size. You can set the scrolling value to “yes” or “no” to make scrollbars appear or not.
Note, HTML 5 does not support scrolling attribute of the iframe.
Following example shows how to use the scrolling attribute:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html>
<head>
<title>iframe example</title>
</head>
<body>
<p>This example show using iframe</p>
<iframe src=“https://www.tutorialscollection.com/font-family-using-font-family-in-html/” height=“300” width=“300” scrolling=“no”></iframe>
</body>
</html>
|
Instead, you should use CSS to specify the scrolling. Read the section below to learn how to use CSS with iframe.
iframe with CSS example
You can use CSS properties as an alternative for iframe attributes. The example below sets the iframe properties in the CSS. The border of the iframe is set by using the border property, scroll with overflow. The Height and width are also set by using the CSS in the iframe class.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!DOCTYPE html>
<html>
<head>
<title>iframe example</title>
<style>
.iframecls{
border: solid 1px red;
width: 300px;
height: 300px;
overflow: hidden;
}
</style>
</head>
<body>
<p>This example show using iframe</p>
<iframe src=“https://www.tutorialscollection.com/font-family-using-font-family-in-html/” class=“iframecls”></iframe>
</body>
</html>
|
Leave A Comment?