<iframe> - HTML CSS HTML Tag

Introduction

The iframe element allows you to embed another HTML document within the existing one.

The iframe Element summary

Item	value
Element:	iframe
Element Type:	Phrasing
Local Attributes:	src, srcdoc, name, width, height, sandbox, seamless
Contents:	Character data
Tag Style:	Start and end tags
New in HTML5?	No
Changes in HTML5	The sandbox and seamless attributes are new in HTML5. The longdesc, align, allowtransparency, frameborder, marginheight, marginwidth, and scrolling attributes are obsolete.

Style Convention

iframe {
  border: 2px inset;
}

Using the iframe Element

Demo Code

ResultView the demo in separate window

<!DOCTYPE html>
<html>
   <head> 
      <title>Example</title> 
   </head> 
   <body> 
      <header> 
         <h1>Things I like</h1> 
         <nav> 
            <ul> 
               <li> 
                  <a href=".html" target="frame"></a> 
               </li> 
               <li> 
                  <a href=".html" target="frame">Activities I Like</a> 
               </li> 
            </ul> 
         </nav> 
      </header> 
      <iframe name="myframe" width="300" height="100"> </iframe>  
   </body><!--from   w w  w . j ava 2 s .  co  m-->
</html>

The width and height attributes specify the size in pixels.

The src attribute sets a URL that should be loaded and displayed in the iframe initially.

The srcdoc attribute allows you to define an HTML document to display inline.

seamless instructs the browser to display the iframe contents as though they were an integral part of the main HTML document.

sandbox, applies restrictions to the HTML document. When sandbox is applied with no value, like this:

...
<iframe sandbox name="myframe" width="300" height="100">
</iframe>
...

the following are disabled:

scripts
forms
plugins
links that target other browsing contexts

You can enable individual features by defining values for the sandbox attribute, like this:

...
<iframe sandbox="allow-forms" name="myframe" width="300" height="100">
</iframe>
...

The allow Values for the iframe sandbox Attribute

Value	Description
allow-forms	Enables forms
allow-scripts	Enables scripts
allow-top-navigation	Allows links that target the top-level browsing contexts, which allows the entire document to be replaced with another.
allow-same-origin	Allows content in the iframe to be treated as though it originated from the same location as the rest of the document

<iframe> - HTML CSS HTML Tag

Introduction

Demo Code

Related Tutorials