| Depr. | Empty | Version |
|---|---|---|
| Yes | No | HTML 4 |
| IE5.5+ | FF1+ | SA1.3+ | OP9.2+ | CH2+ |
|---|---|---|---|---|
| Full | Full | Full | Full | Full |
Syntax
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
frameelement 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 thenoframeselement inside the parentframesetelement - with the
iframe, there is both an opening<iframe>and closing</iframe>tag, and there is no requirement fornoframes- to present content for browsers that do not understand theiframe, 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
- align
alignment/position of the iframe relative to surrounding content - frameborder
instructs the browser whether or not to display a border around the iframe - height
defines the height of the floating frame - longdesc
provides a reference to a long description of the iframe above what the title attribute provides - marginheight
sets height (in pixels) between iframe content and the top and bottom borders - marginwidth
sets width (in pixels) between iframe content and the top and bottom borders - name
name for referencing the iframe by - src
defines the location (source) of the content to be loaded into the iframe - width
defines the width of the floating frame
User-contributed notes
- ID:
- #3
- 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/
