<IFRAME>NN 6 IE 3 HTML 4  

<IFRAME>...</IFRAME>

HTML End Tag: Required  

An iframe element creates an inline frame within the natural flow of a document's content. The frame is a rectangular space into which you may load any other HTML document (or use scripts to dynamically write content to the space). If you assign a value to the name attribute of an iframe element, you may supply that name as the value of a target attribute of a, form, or other element that lets you define a target for a destination or returned document.

Although an iframe element's rectangular space begins immediately following the content that comes before it (including in a line of text), all content following the end tag starts on the next line following the frame rectangle. Text leading up to the iframe element can be aligned in the same ways that text can be aligned around an img or object element.

Content between the start and end tags is ignored by browsers that support the iframe element. All others display such content as inline HTML content (as a way to let users know what they're missing and perhaps provide a link to related information). The Navigator 4 element that comes closest to the functionality and behavior of the iframe element is the ilayer element.

Because an iframe element draws its content from a separate server file, it may be used as a way to accomplish client-side "includes" (see Chapter 5). In most respects, an iframe behaves like a frame element, but without the need for a frameset. In fact, the element acts so much like a frame that if you reference it through frame referencing syntax (window.frameName), the returned object is the same type as a window object, rather than a frame element object.

While the iframe element validates in the transitional HTML 4 DTD along with the frame and frameset elements, only the iframe validates in the transitional XHTML DTD. The iframe validates in the frameset DTDs for HTML 4 and XHTML.

 
Example
 
<IFRAME src="quotes.html" width="150" height="90">
<A href="quotes.html" target="new" style="color:darkred">
 Click here to see the latest quotes </A>
</IFRAME>
 
Object Model Reference
 
[window.]document.getElementById(elementID)
 
Element-Specific Attributes
 
aligndataflddatasrcframeborderheight
hspacelongdescmarginheightmarginwidthname
scrollingsecuritysrcvspacewidth
 
Element-Specific Event Handler Attributes

None.

alignNN 6 IE 3 HTML 4  

align="alignmentConstant"

Optional  

Determines how the rectangle of the iframe element aligns within the context of surrounding content. See Section 8.1.5 earlier in this chapter for a description of the possibilities defined for this element's attribute.

 
Example
 
<IFRAME src="quotes.html" width="150" height="90" align="center"></IFRAME>
 
Value

Case-insensitive constant value.

 
Default

left

 
Object Model Reference
 
[window.]document.getElementById(elementID).align
datafldNN n/a IE 4 HTML n/a  

datafld="columnName"

Optional  

Used with IE data binding to associate a remote data source column name in lieu of a src attribute for an iframe element. The data source column must contain a valid URI (relative or absolute). A datasrc attribute must also be set for the element. Works only with text file data sources in IE 5/Mac.

 
Example
 
<IFRAME datasrc="DBSRC3" datafld="newsURL"></IFRAME>
 
Value

Case-sensitive identifier.

 
Default

None.

 
Object Model Reference
 
[window.]document.getElementById(elementID).dataFld
datasrcNN n/a IE 4 HTML n/a  

datasrc="dataSourceName"

Optional  

Used with IE data binding to specify the ID of the page's object element that loads the data source object for remote data access. Content from the data source is specified via the datafld attribute. Works only with text file data sources in IE 5/Mac.

 
Example
 
<IFRAME datasrc="DBSRC3" datafld="newsURL"></IFRAME>
 
Value

Case-sensitive identifier.

 
Default

None.

 
Object Model Reference
 
[window.]document.getElementById(elementID).dataSrc
frameborderNN 6 IE 3 HTML 4  

frameborder="borderSwitch"

Optional  

Controls whether the iframe element displays a border. If you want linked-in documents to look as if they are embedded as part of the main document, turn off the frameborder attribute.

 
Example
 
<IFRAME src="quotes.html" width="150" height="90" frameborder="no"></IFRAME>
 
Value

On-off values for this attribute vary with the source. HTML 4 specifies the values of 1 (on) and 0 (off). Internet Explorer 4 and Netscape 6 accept the HTML value and yes or no.

 
Default

1

 
Object Model Reference
 
[window.]document.getElementById(elementID).frameBorder
height, widthNN 6 IE 4 HTML 4  

height="length" width="length"

Optional  

These attributes establish the dimensions of the iframe element. IE 4.5 or later on the Mac is required. Both attributes are deprecated in HTML 4 in favor of CSS height and width style attributes.

 
Example
 
<IFRAME src="news.html" height="200" width="200">
 
Value

Any length value in pixels or percentage of available space.

 
Default

A width of 300 pixels; a height of 150 pixels.

 
Object Model Reference
 
[window.]document.getElementById(elementID).height
[window.]document.getElementById(elementID).width
hspace, vspaceNN n/a IE 4 HTML n/a  

hspace="pixelCount" vspace="pixelCount"

Optional  

These attributes set padding around an iframe element within the content flow. The hspace attribute controls padding along the left and right edges (horizontal padding), and the vspace attribute controls padding along the top and bottom edges (vertical padding). Adding such padding provides an empty cushion around the frame. As an alternate (and to achieve cross-browser compatibility), you can specify the various margin style sheet settings, especially if you want to open space along only one edge.

 
Example
 
<IFRAME src="news.html" hspace="20" vspace="10">
 
Value

Any positive integer.

 
Default

0

 
Object Model Reference
 
[window.]document.getElementById(elementID).hspace
[window.]document.getElementById(elementID).vspace
longdescNN 6 IE 6 HTML 4  

longdesc="URL"

Optional  

Specifies a URL of a document that contains a longer description of the element than what the content of the title attribute reveals. One application of this attribute in future browsers is to retrieve an annotated description of the element for users who cannot read the browser screen. The Properties choice for Netscape 6's context menu for this element displays a small window that includes an active link to the URL assigned to the attribute. Version 6 browsers provide no other functionality for this attribute.

 
Example
 
<IFRAME longdesc="newsDesc.html" title="Navigation Bar" src="news.html">
</IFRAME>
 
Value

Any valid URI, including complete and relative URLs.

 
Default

None.

marginheight, marginwidthNN 6 IE 3 HTML 4  

marginheight="pixelCount" marginwidth="pixelCount"

Optional  

Determine the number of pixels between the inner edge of a frame and the content rendered inside the frame. The marginheight attribute controls space along the top and (when scrolled) the bottom edges of a frame; the marginwidth attribute controls space on the left and right edges of a frame. The HTML 4 specification leaves default behavior up to browsers.

Browsers insert their default margins (in the range between 8 and 14 pixels) inside a frame. But if you attempt to override the default behavior, be aware that setting any one of these two attributes causes the value of the other to go to zero. Therefore, unless you want the content to be absolutely flush with various frame edges, you need to assign values to both attributes.

 
Example
 
<IFRAME src="news.html" marginheight="20" marginwidth="14"></IFRAME>
 
Value

Any positive integer value or zero.

 
Default

Varies with browser and operating system.

 
Object Model Reference
 
[window.]document.getElementById(elementID).marginHeight
[window.]document.getElementById(elementID).marginWidth
nameNN 6 IE 3 HTML 4  

name="elementIdentifier"

Optional  

When links and forms must load their destination or returned documents into frames other than the one holding the link or form, those elements have target attributes indicating which frame receives the new content. To direct such content to a frame, the frame must have a value assigned to its name attribute. That same value is assigned to the target attribute of the a or form element.

 
Example
 
<IFRAME name="news" id="news" src="news.html"></IFRAME>
 
Value

Case-sensitive identifier.

 
Default

None.

 
Object Model Reference
 
[window.]document.getElementById(elementID).name
scrollingNN 6 IE 3 HTML 4  

scrolling="featureSwitch"

Optional  

By default, browsers add vertical and/or horizontal scrollbars when the content loaded into an inline frame exceeds the visible content region of the element. Scrollbars can affect the layout of some content because they occupy space normally devoted to content (that is, the frame does not expand to accommodate scrollbars). Also, due to differences in default font sizes in browsers and operating system versions, a given collection of text content may display differently in different clients. If you want to prevent scrollbars from appearing in the frame, set the scrolling attribute to no; if you want scrollbars to be in the frame at all times, set the attribute to yes. In the latter case, if the content does not require scrolling, the scrollbars are visible, but disabled.

Setting the scrolling attribute to no should be used only after you have tested that mission-critical content is always visible in the frame on all browsers and platforms. If the frame is set to not scroll, some users might not be able to see all content of the frame.

In lieu of this attribute, you may also use the CSS overflow style attribute. Microsoft provides extra axis-specific control over scrollbars via their overflow-x and overflow-y style attributes.

 
Example
 
<IFRAME src="news.html" scrolling="no"></IFRAME>
 
Value

Constant values: auto | no | yes.

 
Default

auto

 
Object Model Reference
 
[window.]document.getElementById(elementID).scrolling
securityNN n/a IE 6 HTML n/a  

security="restricted"

Optional  

When activated, this attribute raises the security level of the inline frame to the Restricted level of the Windows Security preferences settings. Such a frame's content may not execute scripts.

 
Example
 
<IFRAME src="news.html" security="restricted">
 
Value

Constant value: restricted.

 
Default

None.

srcNN 6 IE 3 HTML 4  

src="URL"

Optional  

Defines the URL of the content to be loaded into the iframe element. The URL can be an absolute URL or one relative to the URL of the document containing the frameset specifications. You may also use the javascript: pseudo-URL to have the returned value of a script appear in the frame. If you omit the src attribute, the frame opens empty.

 
Example
 
<IFRAME src="news.html"></IFRAME>
 
Value

A complete or relative URL or a javascript: pseudo-URL.

 
Default

None.

 
Object Model Reference
 
[window.]document.getElementById(elementID).src
styleNN 4 IE 4 HTML 4  

style="styleSheetProperties"

Optional  

This attribute lets you set one or more style sheet rule property assignments for the current element. You may use the CSS or (for Navigator 4 only) JavaScript syntax for assigning style attributes. Use the style attribute only with visible (renderable) elements.

 
Example
 
<SPAN style="color:green; font-size:18px">Big, green, and bold</SPAN>
 
Value

An entire CSS-syntax style sheet rule is enclosed in quotes. Multiple style attribute settings are separated by semicolons. Style sheet attributes are detailed in Chapter 11.

 
Default

None.

 
Object Model Reference
 
[window.]document.getElementById(elementID).style
vspace  

  

See hspace.

width  

  

See height.