The Internet Explorer (version 3 and above) has introduced the concept of floating frames. These are much like standard frames, except they can be anywhere within a standard HTML document. A floating frame must be enclosed within <IFRAME> ... </IFRAME> elements. Any HTML between the start and end elements will be displayed by browsers that do not support floating frames, while the frame specified in the <IFRAME> elements will be displayed by those browsers that do.

For example :

<IFRAME NAME="content_frame" width="488" height="244" SRC="welcome.htm">This site uses floating frames</IFRAME>

The above HTML fragment would display the file "content_frame" in Internet Explorer, but would display the text 'This site uses floating frames' to any other browser.

The other main difference between floating and normal frames, is that floating frames accept WIDTH, HEIGHT and standard <IMG> HSPACE, VSPACE and ALIGN attributes, to set the display size and alignment of the frame within the document. They can have other files loaded into them exactly as normal frames (by use of the TARGET attribute in the link and the NAME attribute of the frame).

For an example of floating frames, see the examples page

The other floating frame attributes are:

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <IFRAME> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <IFRAME> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <IFRAME> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <IFRAME> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <IFRAME> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <IFRAME> element for scripting purposes. Any <IFRAME> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

BORDER="Border Size"
The BORDER attribute can be used to specify the thickness of the border to be rendered around the floating frame. Note that it requires the FRAMEBORDER attribute to be set.

BORDERCOLOR="#rrggbb or Colour Name"
The BORDERCOLOR attribute sets the colour of the border to be rendered around the frame. Note that it requires the frame to have a border, by setting the FRAMEBORDER attribute.

DATAFLD="Column Name"
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <IFRAME> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic. As with <FRAME>, the data retrieved from the data source will be used for the SRC attribute of the <IFRAME> element, so should contain valid URLs/URL fragments.

DATASRC="Data Source"
The DATASRC attribute can be used to specify a data source that the <IFRAME> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

FRAMEBORDER="Sets Border"
The FRAMEBORDER attribute accepts boolean values of either "yes" (or "1") or "no" (or "0") to specify whether the frame will be rendered with a border. The default (and also if no FRAMEBORDER attribute is set is "yes"/"1".

NAME="Frame Name"
The NAME attribute names the frame to allow it to be referenced through the Frames collection.

SCROLLING="Scrollbars"
By default, scrollbars will be presented to the reader if the contents of the frame are larger than the specified HEIGHT and WIDTH attributes. To remove the scrollbars, use SCROLLING="no". Using SCROLLING="auto" will only apply scrollbars if the content is too large and using SCROLLING="no" will disable the scrollbars completely.

Every <IFRAME> element in a document is an object that can be manipulated through scripting. Scripting of the <IFRAME> element is only supported by Internet Explorer as Netscape doesn't support the <IFRAME> element.

<IFRAME...> Properties
The <IFRAME...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics. Also, the <IFRAME> element supports the following properties, which all reflect the values in the attributes described above: align, border, borderColor, dataFld, dataSrc, frameBorder, height, hspace, scrolling, src, vspace and width.

<IFRAME...> Methods
The <IFRAME...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<IFRAME...> Events
The <IFRAME...> element/object supports the following events:

onblur
As a <IFRAME> element essentially describes different windows, using the onblur event (fired when the user removes the focus from the <IFRAME> and therefore the window) is equivalent to using the onblur event of the Window Object.

onfocus
Again, using the onfocus event for a <IFRAME> element (fired when the user focuses on the <IFRAME> window definition) is the same as using the onfocus event of the Window Object.

onload
The onload event is fired when the <IFRAME> window definition loads. Using the event in the <IFRAME> element is the same as using it from the Window Object.

onunload
The onload event is fired when the <IFRAME> window definition is un-loaded (by the user shutting the browser down, or by navigating to another page. Using the event in the <IFRAME> element is the same as using it from the Window Object.

© 1995-1998, Stephen Le Hunte

Comments:

• SPAMarunzinbox at @spam@gmail.com " how to make iframes resizable" James Newton replies: See http://forums.devx.com/showthread.php?t=7606+

  +

Questions:

• SPAMmyilvelus at @spam@gmail.com asks: " i tried onunload event in firame but it was not fired. can u explain me ho eto fire onlunload event." +
• SPAMdssrreddys at @spam@rediffmail.com asks: " how to iframe left side border only" +

Interested:

Code:

  .