1. Technology


Inline Frames Allow You to Include Content from External Sources on Your Pages


iFrame on iPhone
Neven Mrgan/Flikr/CC BY 2.0

Inline frames are the only type of frame allowed in HTML5. They allow you to include content from external sources inside your web pages. In essence, an iframe is another browser window set right inside your web page.

How to Use the IFRAME Element

The IFRAME element uses the HTML5 global elements as well as several other elements. Four are also attributes in HTML 4.01:

  • src—the URL for the source of the frame
  • height—the height of the window
  • width—the width of the window
  • name—the name of the window

And three are new in HTML5:

  • srcdoc—the HTML for the source of the frame. This attribute takes precedence over any URL in the src attribute
  • sandbox—a list of features that should be allowed or disallowed in the frame window
  • seamless—tells the user agent that the iframe should be rendered like it is invisibly part of the parent document

To build a simple iframe, you set the source URL and the width and height:

<iframe src="URL" width="200" height="200">
Alternate text if the iframe cannot be rendered

There are also some attributes that are valid in HTML 4.01 but obsolete in HTML5:

  • longdesc—instead, use an A element to link to a description
  • align—instead, use the CSS float property
  • allowtransparency—instead, use the CSS background property to make the ifram transparent
  • frameborder—instead use the border CSS property
  • marginheight—instead, use the CSS margin property
  • marginwidth—instead, use the CSS margin property
  • scrolling—instead, use the CSS overflow property

IFRAME Browser Support

The IFRAME element is supported by all modern browsers:

  • Android
  • Chrome
  • Firefox
  • Internet Explorer 2+
  • iOS / Safari Mobile
  • Netscape 7+
  • Opera 3+
  • Safari

If no version number is listed, that is because all versions of that browser support it.

But while all browsers support the IFRAME element, there is still limited support for some of the HTML5 features.

  • Using overflow to turn off scrolling is not reliable. If you don't want scrollbars on your iframes, you should continue to use the scrolling attribute.
  • The srcdoc, sandbox, and seamless attributes are not supported by any browsers.

Linking with Iframes

When you give your iframes a name or id you can then point your links at that frame with the target attribute on the A element. Then, when a user clicks on the link, it will open inside the referenced iframe rather than the current window.

Try it yourself. Type the following into a web page:

<iframe id="myIframe" src="http://webdesign.about.com/#lp-main" height="200" width="500">
<p>This is my iframe
When you click <a href="http://webdesign.about.com/od/iframes/a/aaiframe.htm#abt" target="myIframe">this link</a> it will open a new document inside the above window.

If the document opened in the IFRAME does not have any targets set then all it's links will open in the same iframe as the parent document.

You can use this feature to make links in one IFRAME change the contents of another IFRAME on the same page.

IFrames and Security

The IFRAME element, by itself, is not a security risk to you or your readers. But it has gotten a bad reputation because it is often used by malicious websites to include content that can infect a visitor's computer without them seeing it on the page. This is done by having links point to the invisible IFRAME and those scripts set off malicious code. The user clicks the link and thinks that the link is broken because nothing appeared to happen, but a script was set off where they couldn't see it.

There are also computer viruses that will inject an invisible IFRAME into your web pages turning your website into a botnet. They can do this through SQL injection and other attacks.

The thing to remember when including an IFRAME on your web page is that your users are only as safe as the content of all the sites you link to. If you have reason to feel a site is untrustworthy, don't link to it in any fashion and most definitely don't include its contents in an IFRAME. But linking to your own pages within iframes does not pose a security risk for you or your users.

  1. About.com
  2. Technology
  3. Web Design / HTML
  4. HTML and XHTML
  5. XHTML
  6. Frames
  7. iFrames
  8. Iframes - How to Use Inline Frames or Iframes

©2014 About.com. All rights reserved.