Table Of Content

HTML IFrames Tutorial

View more Tutorials:

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:
  • TODO Link!
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 CSSvw and vh units are short for  Viewport Width  and  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 the  width and height of  the <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

View more Tutorials: