How and When to Use IFrames

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, commonly just referred to as "iframes", are the only type of frame allowed in HTML5. These frames are essentially a section of your page that you "cut out". In the space that you have cut out of the page, you can then  feed in an external webpage. In essence, an iframe is another browser window set right inside your web page. You see iframes commonly used on websites that need to include external content like a Google map or a video from YouTube.

Both of those popular websites use iframes in their embed code.

How to Use the IFRAME Element

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

  • —the URL for the source of the frame
  • —the height of the window
  • —the width of the window
  • —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="200px" height="200px">
Alternate text if the iframe cannot be rendered
</iframe>

Note that you may choose not to use pixels values for the settings of your iframe, but may instead decide to use a percentage.

If you are building a responsive website whose sizing should change with different screen sizes, these percentages will be important. 

There are also some attributes that are valid in HTML 4.01 but obsolete in HTML5. Since most websites today are using HTML5+, these attributes are ones you will not want to use (but which you may see in some legacy documents).

  • —instead, use an A element to link to a description
  • —instead, use the CSS float property
  • allowtransparency—instead, use the CSS background property to make the ifram transparent
  • —instead use the border CSS property
  • marginheight—instead, use the CSS margin property
  • marginwidth—instead, use the CSS margin property
  • —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 shown in the above list, that is because all versions of that browser support it.

One thing to be mindful of is that 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 at this time.

Linking with Iframes

When you give your iframes a name or id you can then point your links at that frame with the 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="200px" width="500px">
<p>This is my iframe
</iframe>
<p>
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.
</p>

If the document opened in the IFRAME does not have any targets set, then all those 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. Unfortunately iframes have gotten a bad reputation because they can be 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, effectively 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.  Linking to your own pages within iframes, however, does not pose a security risk for you or your users.

Original article by Jennifer Krynin. Edited on 11/7/16 by Jeremy Girard