<iframe> - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:iframe

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

Related Tutorials