HTML Tutorial - HTML iframe








The iframe element embeds another HTML document within the existing one.

It has local attribute:src, srcdoc, name, width, height, sandbox, seamless.

The sandbox and seamless attributes are new in HTML5.

The longdesc, align, allowtransparency, frameborder, marginheight, marginwidth, and scrolling attributes are obsolete.

The following code shows how the iframe element can be used.

<!DOCTYPE HTML>
<html>
<body>
  <a href="http://java2s.com" target="myframe">Tutorial</a>
    <a href="http://java2s.com" target="myframe">Tutorial</a>
  <iframe name="myframe" width="300" height="300"> </iframe>
</body>
</html>

Click to view the demo





Note

An iframe with a name attribute value of myframe is created. This creates a browsing context called myframe.

Then this browsing context is used in the target attribute of other elements-specifically, a, form, button, input, and base.

a element to create a pair of hyperlinks which will load the URLs specified in their href attributes into the iframe.

The width and height attributes specify the size in pixels. The src attribute specifies 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.

The seamless attribute sets the browser to display the iframe as if they were an integral part of the main HTML document.

Otherwise a border is applied by default and a scrollbar is present if the content is larger than the width and height attributes.





iframe sandbox

The sandbox attribute applies restrictions to the HTML document. When the attribute 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 set of values that can be used is described in the following list.

  • 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, or for a new tab or window to be created
  • allow-same-origin - Allows content in the iframe to be treated as if it were from the same location as the rest of the document