How and When to Use IFrames

Inline frames allow you to include content from external sources on your pages

Illustration of browser window
filo / Getty Images

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 code 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:

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

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

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

or

you can then point your links at that frame with the attribute on the

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:

If the document opened in the

does not have any

set, then all those links will open in the same iframe as the

document.

You can use this feature to make links in one

change the contents of another

on the same page.

IFrames and Security

The

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

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

into your web pages, effectively turning your website into a botnet. They can do this through

and other attacks.

The thing to remember when including an

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

. 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