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 frameheight—the height of the windowwidth—the width of the windowname—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 thesrcattributesandbox—a list of features that should be allowed or disallowed in the frame windowseamless—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
</iframe>
There are also some attributes that are valid in HTML 4.01 but obsolete in HTML5:
longdesc—instead, use anAelement to link to a descriptionalign—instead, use the CSSfloatpropertyallowtransparency—instead, use the CSSbackgroundproperty to make the ifram transparentframeborder—instead use theborderCSS propertymarginheight—instead, use the CSSmarginpropertymarginwidth—instead, use the CSSmarginpropertyscrolling—instead, use the CSSoverflowproperty
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
overflowto turn off scrolling is not reliable. If you don't want scrollbars on your iframes, you should continue to use thescrollingattribute. - The
srcdoc,sandbox, andseamlessattributes 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
</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 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.
