iframe (HTML element)

Spec
Depr. Empty Version
Yes No HTML 4
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

<iframe align=" { bottom | left | middle | right | top } " frameborder=" { 0 | 1 } " height="height of window in pixels or percentage" longdesc="Long description of iframe content" marginheight="Height in pixels" marginwidth="Width in pixels" name="Unique name identifier for frame" noresize="noresize" scrolling=" { auto | no | yes } " src="Source of frame contents" width="width of window in pixels or percentage">
</iframe>

Description

In a frameset, the individual windows (or frames) can only be laid in rows or columns, although in days gone by developers found cunning (read: overcomplicated) ways of creating pages where content could appear to be in the middle of a page, apparently floating. Doing this required a complex mess of nested framesets, as if the page were some kind of jigsaw. The iframe was the answer to this problem, providing a window that could be placed anywhere within an existing, non frame-based page, much as you could place a table or an image.

The iframe has a number of attributes that are unique to this element (in the context of it being a window/frame), namely it can be given a fixed height and width and also be set to align with surrounding content, much as an image can; it also shares some attributes with the frame element, namely the longdesc, marginheight, marginwidth, name, scrolling and src attributes.

The iframe differs from the frame in one other way that is worth noting:

  • the frame element is self closing, and thus does not contain anything (there is no closing </frame> tag). To present content to browser that do not understand/support frames, you use the noframes element inside the parent frameset element
  • with the iframe, there is both an opening <iframe> and closing </iframe> tag, and there is no requirement for noframes - to present content for browsers that do not understand the iframe, you simply place it between these opening and closing tags, as demonstrated in the example HTML

Note that iframe is not available to use when specifying strict HTML and XHTML doctypes.

Example

A 200 by 200 pixel square floating frame:

<iframe src="iframe-content.html" height="200"
width="200" frameborder="1">
<p>Your browser does not support iframes.
That kinda sucks, eh?</p>
</iframe>

Use this for…

A typical usage for an iframe is where you wish to load content from another web server and make the content appear integrated with your own web site. It may also be used for the purposes of dynamically changing the content on a defined part of the page - because the iframe has a name reference, it can be manipulated by JavaScript quite easily (this technique is slowly being overtaken by AJAX techniques for updating content on the page without the requirement for a separate window).

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full

Every browser listed supports this element type.

In this Section

User-contributed notes

ID:
#3
Contributed:
by Toby Somerville
Date:
Wed, 04 Jun 2008 04:08:09 GMT

An alternative to using the iframe element is to use the object element. See the WC3 link: http://www.w3.org/TR/WD-frames-970331 (over half way down).

Also, try: http://aplus.co.yu/web-dev/insert-html-page-into-another-html-page/

Related Products