o7planning

HTML IFrames Tutorial with Examples

  1. HTML iframe
  2. width, height
  3. srcdoc
  4. name
  5. 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:

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>.
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.
allow-orientation-lock
allow-popups-to-escape-sandbox
allow-presentation