HTML Element: iFrame

HTML has an element called iframe that allows you to embed webpage inside a webpage.

Let's see an example of how to arrange this particular type of frame (this type of iframe is the only one supported in modern versions of HTML):

page1.html

<!DOCTYPE html>
<html>
<head>
  <title>testing iframes</title>
  <meta charset="UTF-8">
</head>
<body>
<h1>This is an iframe test</h1>
<iframe src="page2.html" width="400" height="200">
Browser does not have iframe capability available
</iframe>
<h2>This is already outside the iframe</h2>
</body>
</html>

As we can see when we need to add the iframe inside the page we have:

<iframe src="page2.html" width="400" height="200">
Browser does not have iframe capability available
</iframe>

We indicate the width and height that the iframe should take, the location continues the flow of the page.

The page to be embedded does not introduce any new concepts:

Page2.html

<!DOCTYPE html>
<html>

<head>
    <title>testing iframes</title>
    <meta charset="UTF-8">
</head>

<body>
    <h2>This text is inside the iframe.</h2>
    <h2>This text is inside the iframe.</h2>
    <h2>This text is inside the iframe.</h2>
    <h2>This text is inside the iframe.</h2>
    <h2>This text is inside the iframe.</h2>
    <h2>This text is inside the iframe.</h2>
    <h2>This text is inside the iframe.</h2>
    <h2>This text is inside the iframe.</h2>
    <h2>This text is inside the iframe.</h2>
    <h2>This text is inside the iframe.</h2>
    <h2>This text is inside the iframe.</h2>
    <h2>This text is inside the iframe.</h2>
    <h2>This text is inside the iframe.</h2>
    <h2>This text is inside the iframe.</h2>
    <h2>This text is inside the iframe.</h2>
    <h2>This text is inside the iframe.</h2>
    <h2>This text is inside the iframe.</h2>
    <h2>This text is inside the iframe.</h2>
    <h2>This text is inside the iframe.</h2>
    <h2>This text is inside the iframe.</h2>
    <h2>This text is inside the iframe.</h2>
    <h2>This text is inside the iframe.</h2>
    <h2>This text is inside the iframe.</h2>
    <h2>This text is inside the iframe.</h2>
</body>

</html>

The result of displaying "page1.html" in the browser is:

iframe html example coding180

Some useful properties applicable to an iframe:

src File to display inside the iframe.
width Width in pixels.
height High in pixels.
frameborder We can assign the values 1 or 0. If it is 0, the border is not shown.
scrolling The possible values of this property are: "auto","yes","no". By default it is initialized with the value "auto". The auto value means that the browser decides if the scroll bar should be displayed. It will display it only if some content of the iframe is not visible.
If we define the value "yes" we are indicating that the navigation bar must always be visible and finally if we assign the value "no" we will be indicating that the navigation bar must never appear for said iframe.
name Name of the iframe if we want to access it from another page. For example if we want to update its content from a link located on another page.

Robort Gabriel

Lagos, Nigeria

Skills