iframe

• Comments from section
• All comments
• Help

WebPlatform Docs welcomes all comments. If you want to comment, please register or log in. It is free.

This tool helps to make and review comments inline.

How to Use

insert instructions, with images, here

iframe

This page has been flagged with the following issues:

High-level issues:

• Needs Topics

• Missing Relevant Sections

• Data Not Semantic

• Unreviewed Import

Content:

• Incomplete

• Not Neutral

• Cleanup

• Compatibility Incomplete

• Examples Best Practices

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 uses the iframe element and an HTML fragment to create a frame containing the page sample.htm.

<IFRAME ID=IFrame1 FRAMEBORDER=0 SCROLLING=NO SRC="sample.htm"></IFRAME>

This example returns a reference to the all collection of the document contained by the iframe.

var collAll = document.frames("IFrame1").document.all

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

• Document Object Model (DOM) Level 2 HTML Specification, Section 1.6.5
• HTML 4.01 Specification, Section 16.5

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

This article contains content originally from external sources.

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