HTML Frames

z

On a web page, framing means that a website can be organized into frames. Each frame displays a different HTML document. Headers and sidebar menus do not move when the content frame is scrolled up and down. For developers frames can also be convenient. For example, if an item needs to be added to the sidebar menu, only one file needs to be changed, whereas each individual page on a non-frameset website would have to be edited if the sidebar menu appeared on all of them. However, server-side includes and scripting languages such as PHP can also be used to accomplish this aim without some of the drawbacks of frames such as confusing the operation of the address bar and back and forward buttons.

The contents of the frames may be hosted on the same server as the parent page, or it may link in code from another website server such that these external contents are automatically displayed within the frame (transclusion or remote loading). This may be confusing and inconvenient to the users: they can get the impression that the information belongs to the same website; also, less than the full browser window is available and the address bar is less informative. Some websites request not to be used in this way on other websites; some discourage it by including a framekiller script in its pages. The framing website runs a risk of being blamed for external content that, for example, is or becomes inaccurate or objectionable.

Although frames were included in the XHTML 1.0 specification, they were not carried across to XHTML 1.1. The intended eventual replacement is XFrames (XFrames), which attempts to solve the problem of addressing a populated frameset through composite URIs. For those serving web content under the XHTML 1.0 specification, documents may be embedded within one another via either the object or iframe element tags. Under the 1.1 specification, iframe was removed, leaving only the object element for transclusion until browsers begin support for XFrames. Unfortuneatly Internet Explorer 7 does not handle objects used to replace the function of an iframe, it doesn't recognise that a link from within the included page has the containing page as it's _parent. Therefore constructing a menu to be included on every page, in imitation of a frameset, fails as the parent frame cannot be targeted. Gecko based browsers, like Firefox, however work perfectly well with this construct.

An HTML document may contain a header and a body or a header and a frameset, but not both. For frames the Frames DTD must be used.

<frameset>…</frameset>

Delimit the frameset. The frames layout is given by comma separated lists in the rows and cols attributes.

<frame>…</frame>

Delimit a single frame, or region, within the frameset. A different document linked with the src attribute appears inside.

<noframes>…</noframes>

Contains a normal <body> element with child elements that will appear in web browsers that don't support frames.

<iframe>…</iframe>

An inline frame inside a normal HTML <body>, which embeds another HTML document. A similar effect can also be achieved using the object element. These approaches differ in some ways (World Wide Web Consortium).

IFrame (from inline frame) is an HTML element which makes it possible to embed another HTML document inside the main document.

The size of the IFrame is specified in the surrounding HTML page, so that the surrounding page can already be presented in the browser while the IFrame is still being loaded. The IFrame behaves much like an inline image and the user can scroll it out of view. On the other hand, the IFrame can contain its own scroll bar, independent of the surrounding page's scroll bar.

While regular frames are typically used to logically subdivide the content of one website, IFrames are more commonly used to insert content (for instance an advertisement) from another website into the current page.

The following is an example of an HTML document containing an IFrame:
 <html>
<head>
<title>This is an Inline Frames Example</title>
</head>

<body>
This page comes from http://samplewebpage.com:
<iframe src="http://samplewebpage.com"
height="100" width="200" frameborder="0" scrolling="no">
Alternative text for browsers that do not understand IFrames.
</iframe>
</body>
</html>

The embedded document can be replaced with a different one without reloading the surrounding page, by using the "target" attribute of an HTML anchor or by employing JavaScript. This makes many interactive applications possible, and IFrames are therefore commonly used by Ajax applications (this is a combination of Asynchronous Javascript and XML languages). The main alternative to using an IFrame in these situations is editing a document's DOM tree. Sometimes invisible IFrames are also used for asynchronous communication with the server, as an alternative to XMLHttpRequest. More recently, Mozilla Firefox, Opera and Microsoft Internet Explorer introduced contentEditable and designMode, which enables users to edit the contents of the HTML contained in an IFrame. This feature has been used to develop rich text (WYSIWYG) editors within an IFrame element. Popular applications which make use of this feature include Google Docs & Spreadsheets (formerly Writely), JotSpot Live, and MSN Hotmail to name a few.

 

© New Blogger Templates | Webtalks