HTML IFrames Tutorial with Examples

HTML iframe
width, height
srcdoc
name
sandbox

1. HTML iframe

In HTML, the <iframe> tag is used to display a web page within another web page.

This is the simplest syntax for you to create an <iframe>:

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

The list below includes attributes of the <iframe>:

Attribute	Value	Description
src	URL	Specifies the address of the document to embed in the <iframe>.
srcdoc	HTML_code	Specifies the HTML content of the page to show in the <iframe>.
name	text	Specifies the name of an <iframe>.
height	pixels	Specifies the height of an <iframe>. The default value is 150 pixels.
width	pixels	Specifies the width of an <iframe>. The default value is 150 pixels.
sandbox	allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation	Enables an extra set of restrictions for the content in an <iframe>.

Notes: There are several other HTML4.1 <iframe> attributes but they were no longer supported in HTML5 including align, frameborder, longdesc, marginheight, marginwidth and scrolling.

The <iframe> tag also supports some standard attributes in HTML:

HTML Global Attributes

See more: Use Javascript to work with Frame hierarchies:
Javascript Window

2. width, height

The width and height attributes help you specify the width and height for <iframe> in pixels with the default value of (width,height) = (300px,150px).

width-height-example.html

<!DOCTYPE html>
<html>
<head>
  <title>Iframe</title>
  <meta charset="UTF-8">
</head> 
<body>
  <h3>iframe - width/height:</h3>

  <iframe src='child.html'
      width= 300 height = 100
      style="border:1px solid black"></iframe>
</body>
</html>

You can also use CSS to set the width and height of <iframe>:

css-width-height-example.html

<!DOCTYPE html>
<html>
<head>
  <title>Iframe</title>
  <meta charset="UTF-8">
</head>
<body>
  <h3>iframe - width/height:</h3>
  <iframe src='child.html'
      style="width:300px;height:100px;border:1px solid black"></iframe>
</body>
</html>

vw, vh

In CSS, vw and vh units are short for Viewport Widthand Viewport Height respectively.

20vw = 20% Viewport Width
100vw = 100% Viewport Width
20vh = 20% Viewport Height
100vh = 100% Viewport Height
...

The example below uses CSS to set the width and height of the <iframe> to 100%.

width-height-100-vw-vh.html

<!DOCTYPE html>
<html>
<head>
  <title>Iframe</title>
  <meta charset="UTF-8">
</head>
<body>
  <h3>iframe:</h3>
  <p>style={width:100vw; height:100vh}</p>
  <iframe src='child.html'
      style="border:1px solid black;width:100%;height:100vh;"></iframe>
  <br/>
</body>
</html>

Besides, there are 2 other approaches for you to set thewidth and height ofthe <iframe> to 100% such as:

iframe {
    position: fixed;
    background: #000;
    border: none;
    top: 0; right: 0;
    bottom: 0; left: 0;
    width: 100%;
    height: 100%;
}

Or:

html, body {
    height: 100%;
    margin: 0;         /* Reset default margin on the body element */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    width: 100%;
    height: 100%;
}

3. srcdoc

The srcdoc attribute specifies the HTML content to display in the <iframe>.

srcdoc-example.html

<!DOCTYPE html>
<html>
<head>
  <title>Iframe</title>
  <meta charset="UTF-8">
  <script>
     function setNewContentForIframe() {
        var div = document.getElementById("mydiv");
        document.getElementById("myframe").srcdoc = div.innerHTML;
     }
  </script>
</head>
<body>
  <h3>iframe - srcdoc:</h3>

  <iframe srcdoc="<h3>This is an iframe</h3>" id ="myframe"
      height ="100"
      style="border:1px solid black"></iframe>
  <p>Div</p>
  <div style="background: #e5e7e9;padding:5px;" id="mydiv">
      <h4>Content in a div</h4>
      Content in a div
  </div>
  <br/>
  <button onClick="setNewContentForIframe()">Set new Content for Iframe</button>
  <a href="">Reset</a>
</body>
</html>

4. name

A name of the <iframe> can be used as a target for the <a> tag:

name-example.html

<!DOCTYPE html>
<html>
<head>
  <title>iframe name</title>
  <meta charset="UTF-8">
</head>
<body>
  <h3>iframe - name:</h3>
  <a href="child.html" target="myframe">Open Link in 'myframe'</a>
  <br/><br/>
  <iframe src=''
         style="border:1px solid black" name="myframe"></iframe>
  <br/>
  <a href="">Reset</a>
</body>
</html>

5. sandbox

The sandbox attribute is used to apply additional restrictions on the <iframe>.

The sandbox attribute can take one of the values below, or multiple values separated by a space. If the value of the sandbox is empty, all restrictions will be applied.

allow-forms

Allows FORM in the <iframe> to be submitted. If you use the sandbox attribute for the <iframe> but its value does not contain the "allow-forms" keyword, the submission of FORM in the <iframe> will be disabled.

allow-modals

Allows the alert(), confirm(), prompt() functions to work in the <iframe>.

Alert, Confirm, Prompt Dialog Box in Javascript

allow-popups

allow-popups keyword allows <iframe> to open a new window such as window.open(), showModalDialog() and <a target="_blank">. If the <iframe> has the sandbox attribute but its value does not include the allow-popups keyword, you cannot open a new window from this <iframe>.

allow-scripts

Allows the <iframe> to run Scripts, but it doesn't allow creating popup windows.

allow-top-navigation

Allows <iframe> to navigate the its top-level browsing context. This means that you can use <a target="_top">, or window.open (URL, "_ top") in the <iframe>.

allow-top-navigation-by-user-activation

Allows <iframe> to navigate the its top-level browsing context; however, the navigation must originate from the user's actions.

allow-same-origin

If the <iframe> has the sandbox attribute but it does not include the allow-same-origin value, the URL of the <iframe> is treated as coming from a particular place and mismatching with the same-origin policy.

allow-pointer-lock

Allow-pointer-lock keyword allows <iframe> to use the Pointer Lock API.

The Pointer Lock API allows locking the cursor in an area. It ensures that every mouse event is still monitored even if the cursor goes past the boundary of this area. The API is useful for 3D games running in the browser, which the user can control the game even when the cursor is outside the game-play area.

https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API

allow-orientation-lock

allow-popups-to-escape-sandbox

allow-presentation