iframe

< html‎ | elements
Jump to: navigation, search

iframe


W3C Recommendation

Summary

The iframe element (<iframe>) introduces a new nested browsing context.


Overview Table

DOM Interface HTMLIFrameElement

Iframes are one the best ways to build up a complex, detailed webpage from smaller, more manageable chunks. By using iframe tags, a developer can include webpages as part of a larger, enompassing parent page. Unlike frames, iframes can be styled through CSS and easily molded to fit seamlessly within the parent page. One neat use of an iframe is to display a custom Google map within the page. This can be done by setting the 'src' attribute of the iframe tag to Google Map URL.

Examples

This example embeds http://example.com/ via an IFrame element.

HTML

<iframe id="theFrame" src="http://example.com/"></iframe>

This example shows how to grab the Document contained within an IFrame element (note that you may only reach down into an IFrame if the page it has loaded is same-origin).

JavaScript

var frameDoc = document.getElementById("theFrame").contentDocument;

Usage

The developer should be careful not to overuse iframes, because they dramatically slow down the rendering of a page. For each extra iframe, the browser has to make an extra request to the server.

Notes

Remarks

The iframe element functions as a document within a document, or like a floating frame. The frames collection provides access to the contents of an iframe. Use the frames collection to read or write to elements contained in an iframe. For example, the syntax for accessing the backgroundColor style of the body object in an iframe is:

sColor = document.frames("sFrameName").document.body.style.backgroundColor;

You can access the iframe object's properties, but not its contents, through the object model of the page where the iframe object resides. For example, the syntax for accessing the border style of the iframe object is:

sBorderValue = document.all.oFrame.style.border;

Note  Properties of the iframe must be accessed using the prefix, document.all, for example, document.all.iframeId.marginWidth.

Security Warning:   To protect user privacy and safeguard your applications, Windows Internet Explorer restricts some interactions between frames that host Web pages from different domains. To treat the content of the iframe as if it were in the Restricted Sites zone, set the SECURITY attribute to "restricted." For more information about using the Dynamic HTML (DHTML) object model with the frame and iframe objects, see About Cross-Frame Scripting and Security and Security Considerations: Dynamic HTML. Windows Internet Explorer 8 and later. The values of the longDesc and src attributes depend on the current document compatibility mode. Windows Internet Explorer 7 and later. For security reasons, resizing is disabled for iframe objects that display content hosted on a domain different from the domain hosting the parent document. If you trust the content you are loading into an iframe object, you can enable resizing by specifying values for the minWidth and maxWidth attributes of the iframe element in the source of the parent document. You must specify values for both attributes to enable resizing. Microsoft Internet Explorer 5.5 supports transparent content with inline floating frames. The following conditions must be met to define transparent content for inline floating frames.

  1. The allowTransparency attribute, used with the iframe element, must be set to true.
  2. In the iframe content source document, the backgroundColor attribute of the body element must be set to transparent.

Using Transparency with Inline Floating Frames

Standards information


HTML information

{

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ? ? ? ?

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?

See also

External resources

http://www.w3.org/TR/html-markup/iframe.html#iframe

Related pages (MSDN)

  • Using IFRAME Elements

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]