Jul 9, 2023

HTML iFrame

In this tutorial you will learn how to use an iframe to display a web page within another web page.

What is iframe

An iframe or inline frame is used to display external objects including other web pages within a web page. An iframe pretty much acts like a mini web browser within a web browser. Also, the content inside an iframe exists entirely independent from the surrounding elements.

The basic syntax for adding an iframe to a web page can be given with:

<iframe src="URL"></iframe>

The URL specified in the src attribute points to the location of an external object or a web page.

The following example display “hello.html” file inside an iframe in current document.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>HTML iFrame</title>
  </head>
  <body>
    <iframe src="/examples/html/hello.html"></iframe>
  </body>
</html>

Setting Width and Height of an iFrame

The height and width attributes are used to specify the height and width of the iframe.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Specify iFrame Dimensions in HTML</title>
  </head>
  <body>
    <h2>Specify Width and Height Using Attributes</h2>
    <iframe src="/examples/html/hello.html" width="400" height="200"></iframe>
    <hr />
    <h2>Specify Width and Height Using CSS</h2>
    <iframe
      src="/examples/html/hello.html"
      style="width: 400px; height: 200px;"
    ></iframe>
  </body>
</html>

You can also use CSS to set the width and height of an iframe, as shown here:

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Specify iFrame Dimensions in HTML</title>
  </head>
  <body>
    <h2>Specify Width and Height Using Attributes</h2>
    <iframe src="/examples/html/hello.html" width="400" height="200"></iframe>
    <hr />
    <h2>Specify Width and Height Using CSS</h2>
    <iframe
      src="/examples/html/hello.html"
      style="width: 400px; height: 200px;"
    ></iframe>
  </body>
</html>

Please see the tutorial on HTML styles to learn the methods of applying CSS to HTML elements.

Note: The width and height attribute values are specified in pixels by default, but you can also set these values in percentage, such as 50%, 100% and so on. The default width of an iframe is 300 pixels, whereas the default height is 150 pixels.

Removing Default Frameborder

The iframe has a border around it by default. However, if you want to modify or remove the iframe borders, the best way is to use the CSS border property.

The following example will simply render the iframe without any borders.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Removing Borders from iFrame Using CSS</title>
  </head>
  <body>
    <iframe src="/examples/html/hello.html" style="border: none;"></iframe>
  </body>
</html>

Similarly, you can use the border property to add the borders of your choice to an iframe. The following example will render the iframe with 2 pixels blue border.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Change iFrame Border Using CSS</title>
  </head>
  <body>
    <iframe
      src="/examples/html/hello.html"
      style="border: 2px solid blue;"
    ></iframe>
  </body>
</html>

Using an iFrame as Link Target

An iframe can also be used as a target for the hyperlinks.

An iframe can be named using the name attribute. This implies that when a link with a target attribute with that name as value is clicked, the linked resource will open in that iframe.

Let’s try out an example to understand how it basically works:

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Opening Links in an iFrame</title>
    <style>
      iframe {
        width: 100%;
        height: 500px;
      }
    </style>
  </head>
  <body>
    <iframe src="/examples/html/hello.html" name="myFrame"></iframe>
    <p>
      <a href="https://www.themak.com" target="myFrame">Open</a>
    </p>
  </body>
</html>