Browse by title articles:

IFRAMES and their Rising Popularity

by Julie George    

The IFRAME element allows authors to insert a frame within a block of text. Inserting an inline frame within a section of text is much like inserting an object via the OBJECT element: they both allow you to insert an HTML document in the middle of another, they may both be aligned with surrounding text, etc.

For example: A Simple definition

<iframe width=150 height=200 src="trial.htm"> </iframe>
<iframe width=40% height=%60 src="trial.htm"> </iframe>

Here the tags enclosed are empty as the Inline Frames recognizes only “src” as its main attribute. The “src” defines the page to be displayed inside the frame. This “src” attribute functions similar to the image src tag (<img src=”fig.gif”>)

User agents that do not support frames or are configured not to display frames, on the other hand, should only display the contents of the IFRAME element.

For example:

<iframe width=150 height=200 src="trial.htm">IF YOU ARE ABLE TO SEE THIS TEXT, THEN YOUR BROWSER IS NOT COMPATIBLE WITH IFRAMES. PLEASE UPGRADE YOUR BROWSER! </iframe>

The most common attributes for <iframe> are the following

SRC=URI (URI of frame content)
NAME=CDATA (name of frame)
LONGDESC=URI (link to long description)
WIDTH=Length (frame width)
HEIGHT=Length (frame height)
ALIGN=[ top | middle | bottom | left | right ] (frame alignment)
FRAMEBORDER=[ 1 | 0 ] (frame border)
MARGINWIDTH=Pixels (margin width)
MARGINHEIGHT=Pixels (margin height)
SCROLLING=[ yes | no | auto ] (ability to scroll)
These are few of the attributes, usage of them differs as per your requirements.

For more detailed information on the functioning of each attribute check out these below mentioned links for more options of <iframe> tag

http://www.bensplanet.com/htmldic/attributes.asp?tagName=IFRAME&Alpha=I&Attrib=All

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/IFRAME.asp

Internet Explorer has supported iframe since version 3. However, IE as well other browsers have problems in the support, as discussed later in this document.

Netscape 6 supports iframe. It has been reported that Netscape 4.7 on Mac has iframe support, but all Netscape 4.x versions on Windows probably lack support. And it has been reported that Mozilla M12 supports iframe.

iCab supports it, with a user option to disable the support.

WebTV Plus has iframe support, but the "small bugs" include failure to comply with the fundamental idea of using the content of the element only if the inline frame itself is not displayed.

Lynx 2.8.2 handles iframe in a manner similar to its treatment of normal frames: it provides a link (preceded by the text IFRAME:) to the document specified in the src attribute of the iframe tag and then renders the content of the iframe element. As the link text, it uses the name attribute if present, otherwise the URL (the src attribute value).

Opera 4.0 beta supports iframe, with the option to turn the support off (as independently of normal frame support), and the default setting seems to be to have the support disabled.

Browsers, which do not support iframe, are expected to ignore the start and end tags of the element and render its content instead. This is a special case of the general idea of ignoring unknown tags. This could fail if a browser does recognize iframe but has a fundamentally incorrect implementation for it.

Normal frames are used to divide the entire browser window (or a frame) to sub windows. Inline frames appear inside the presentation of a document much the same way as images are: the browser allocates some space for an inline frame and takes this into account when rendering the document. This means, in particular, that an inline frame as a whole scrolls along with the rest of the document, so it might be scrolled away. Whether this is positive or negative depends on the aims and nature of the page. (An inline frame usually has its own internal scroll bar too, for scrolling its own content.)

Example of an Iframe in a menu driver program

There are three page of coding. For trying out please use the same names so that it functions properly. JavaScript is case sensitive, in case of a script error check for your open and closed brackets and capitals.

1st step: Create a page called Main.htm and copy the following code into it:

<html>
<head>
<meta name="Author" content="Julie George">
<title>Working With iframes</title>
<script language="Javascript">
<!-- Original: Julie George (jul_geo@yahoomail.com ) -->
<!-- hide from old browsers
// Copyright © 2003 by Julie George.
function replace(string,text,by)
{
// Replaces text with by in string
var strLength = string.length, txtLength = text.length;
if ((strLength == 0) || (txtLength == 0)) return string;
var i = string.indexOf(text);
if ((!i) && (text != string.substring(0,txtLength))) return string;
if (i == -1) return string;
var newstr = string.substring(0,i) + by;
if (i+txtLength < strLength)
newstr += replace(string.substring(i+txtLength,strLength),text,by);
return newstr;
}
function showFrames()
{
var r=0;
for (i=0; i<window.document.float1.document.forms[0].elements.length; i++)
{
if(window.document.float1.document.forms[0].elements[i].checked)
{
var tel=new Array()
tel[r]=window.document.float1.document.forms[0].elements[i].value
tel=replace(tel[r],',','');
//alert(tel[r]+r);You can use this to check whether your value is passed, just uncomment
document.forms[0].elements['col'+r].value=tel;r=r+1;
}
//document.forms[0].elements['col'+r].value=tel;
//You can use this to check whether your value is passed, just uncomment
}
}
function showFrames1()
{
var r=0;for (i=0; i<window.document.float2.document.forms[0].elements.length; i++)
{
if(window.document.float2.document.forms[0].elements[i].checked)
{
var tel=new Array()
tel[r]=window.document.float2.document.forms[0].elements[i].value
tel=replace(tel[r],',','');
//alert(tel[r]+r);You can use this to check whether your value is passed, just uncomment
document.forms[0].elements['col'+r].value=tel;r=r+1;
}
// document.forms[0].elements['col'+r].value=tel;
// You can use this to check whether your value is passed, just uncomment
}
}
function but()
{
Layer1.style.visibility="visible"
Layer2.style.visibility="hidden"
}
function lol()
{
Layer1.style.visibility="hidden"
Layer2.style.visibility="visible"
}
-->
</SCRIPT>
</head>
<body>
<form name="form1" method="post" action="">
<h1>iframe-julie</h1><CENTER>
<table width="75%" border="1">
<tr>
<td align="center"><input type="button" onClick="but()" value="NAME"></td>
<td align="center"><input type="button" onClick="lol()" value="PLACE"></td>
</tr></table></CENTER>
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; visibility:hidden">
<iframe SRC="name.htm" NAME="float1" WIDTH="400" HEIGHT="250" ALIGN="CENTER" onload="showFrames()">
You will not see this text if your browser does not support IFRAME.<br>
</iframe>
</div>
<div id="Layer2" style="position:absolute; width:200px; height:115px; z-index:1; visibility:hidden">
<iframe SRC="placy.htm" NAME="float2" WIDTH="500" HEIGHT="250" ALIGN="CENTER" onload="showFrames1()">
You will not see this text if your browser does not support IFRAME.<br>
</iframe>
</div>
<BR>
<BR>
<BR>
<CENTER>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<table width="338" border="1">
<tr>
<td width="328"><b><font face="Arial, Helvetica, sans-serif">FIRST</font></b>
<input type="text" name="col0">
</td>
</tr>
<tr>
<td width="328">SECOND
<input type="text" name="col1">
</td>
</tr>
<tr>
<td width="328">THIRD
<input type="text" name="col2">
</td>
</tr>
<tr>
<td width="328">FOURTH
<input type="text" name="col3">
</td>
</tr>
<tr>
<td width="328">FIFTH
<input type="text" name="col4">
</td>
</tr>
</table>
<br>
<br>
</CENTER>
</form>
</body>
</html>

2nd Step: Create a page called name.htm and copy the following code:

<html>
<head>
<meta name="Author" content="Julie George">
<title>Working With iframes</title>
<script language="Javascript">
<!-- Original: Julie George (jul_geo@yahoomail.com ) -->
<!-- hide from old browsers
// Copyright © 2003 by Julie George.
function sel(str)
{
//alert(str.value+str.name);
window.parent.showFrames();
}
-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<form name="sef">
<table width="400" border="1">
<tr>
<td width="127"><b>FIRST</b></td>
<td width="257">ADAM
<input type="radio" name="col0" value="ADAM" checked onClick="sel(this)">
</td>
<td width="257">ABIGAIL
<input type="radio" name="col0" value="ABIGAIL" onClick="sel(this)">
</td>
<td width="257">ADNAN
<input type="radio" name="col0" value="ADNAN" onclick="sel(this)">
</td>
</tr>
<tr>
<td width="127"><b>SECOND :</b></td>
<td width="257">BASKAR
<input type="radio" name="col1" value="BASKAR" checked onClick="sel(this)">
</td>
<td width="257">BINU
<input type="radio" name="col1" value="BINU" onClick="sel(this)">
</td>
<td width="257"> BIJU
<input type="radio" name="col1" value="BIJU" onclick="sel(this)">
</td>
</tr>
<tr>
<td width="127"><b>THIRD :</b></td>
<td width="257">CHRIS
<input type="radio" name="col2" value="CHRIS" checked onClick="sel(this)">
</td>
<td width="257">CINDY
<input type="radio" name="col2" value="CINDY" onClick="sel(this)">
</td>
<td width="257">CINI
<input type="radio" name="col2" value="CINI" onclick="sel(this)">
</td>
</tr>
<tr>
<td width="127"><b>FOURTH:</b></td>
<td width="257">DANIEL
<input type="radio" name="col3" value="DANIEL" checked onClick="sel(this)">
</td>
<td width="257">DAVID
<input type="radio" name="col3" value="DAVID" onClick="sel(this)">
</td>
<td width="257">DINESH
<input type="radio" name="col3" value="DINESH" onclick="sel(this)">
</td>
</tr>
<tr>
<td width="127"><b>FIFTH :</b></td>
<td width="257">EDWIN
<input type="radio" name="EDWIN" value="do1" checked onClick="sel(this)">
</td>
<td width="257">EDGAR
<input type="radio" name="EDGAR" value="do2" onClick="sel(this)">
</td>
<td width="257">ELI
<input type="radio" name="ELI" value="do3" onclick="sel(this)">
</td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
<p><br><br><br></p>
</form>
</body>
</html>

This is the code for the first name link.

3rd Step: Create a page called placy.htm and copy the following code:

<html>
<head>
<meta name="Author" content="Julie George">
<title>Working With iframes</title>
<script language="Javascript">
<!-- Original: Julie George (jul_geo@yahoomail.com ) -->
<!-- hide from old browsers
// Copyright © 2003 by Julie George.
function sel(str)
{
//alert(str.value+str.name);
window.parent.showFrames1();
}
-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<form name="sef">
<table width="400" border="1">
<tr>
<td width="127"><b>FIRST</b></td>
<td width="257">USA
<input type="radio" name="col0" value="USA" checked onClick="sel(this)">
</td>
<td width="257">UK
<input type="radio" name="col0" value="UK" onClick="sel(this)">
</td>
<td width="257">CAN
<input type="radio" name="col0" value="CAN" onclick="sel(this)">
</td>
</tr>
<tr>
<td width="127"><b>SECOND :</b></td>
<td width="257">HK<input type="radio" name="col1" value="HK" checked onClick="sel(this)">
</td>
<td width="257">JAP
<input type="radio" name="col1" value="JAP" onClick="sel(this)">
</td>
<td width="257">CHN
<input type="radio" name="col1" value="CHN" onclick="sel(this)">
</td>
</tr>
<tr>
<td width="127"><b>THIRD :</b></td>
<td width="257">IND
<input type="radio" name="col2" value="IND" checked onClick="sel(this)">
</td>
<td width="257">PAK
<input type="radio" name="col2" value="PAK" onClick="sel(this)">
</td>
<td width="257">NEP
<input type="radio" name="col2" value="NEP" onclick="sel(this)">
</td>
</tr>
<tr>
<td width="127"><b>FOURTH:</b></td>
<td width="257">AUS
<input type="radio" name="col3" value="AUS" checked onClick="sel(this)">
</td>
<td width="257">NZ
<input type="radio" name="col3" value="NZ" onClick="sel(this)">
</td>
<td width="257">FIJI
<input type="radio" name="col3" value="FIJI" onclick="sel(this)">
</td>
</tr>
<tr>
<td width="127"><b>FIFTH :</b></td>
<td width="257">UK
<input type="radio" name="col4" value="UK" checked onClick="sel(this)">
</td>
<td width="257">FRN
<input type="radio" name="col4" value="FRN" onClick="sel(this)">
</td>
<td width="257">GER
<input type="radio" name="col4" value="GER" onclick="sel(this)">
</td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
<p><br><br><br></p>
</form>
</body>
</html>

This is the code for the second link of place.

I have tried to give you a brief examples using <iframe>,<div> and other main tags to create a simple menu driven program to understand the concepts. Once you have mastered the simple logic behind Iframes developing your own optional code becomes easier.

Creating a simple vertical/horizontal scroll page without any JavaScript’s.
Creating an entire menu driven webpage.
Creating a simple display box for different images in the same page.
Creating alternative information’s for the pages.
Many more optional solution rests at the hands of the user.
As I was trying to find out the limitations to the code, I found very few which I mention below

Most of the older browser fails to recognize Iframes.
Some attributes differ in different browsers.
As I learnt very recently, most of the search engines do not index pages using Iframes. So the optional solution will be to - use a sitemap and link directly into the iframe page - remembering to force the orphan iframe back into its frameset.

In conclusion, Iframes, are very useful framework for people who do not want to be constrained by the ordinary frames. It is also useful for people who want to embed text objects or image objects in the main page without much fuss. All the best for exploring more options for Iframe!!

Julie currently works in Los Angeles as a programmer specialising in databases such as MS-SQL, MS-Access and Oracle. She has just completed a stock application for the company where she works and is also involved in creating B2B, B2C and her personal website. Julie has a passion for computers and has completed an MBA in finance. Her plan is to study for a PhD, specialising in Management Information Systems. Julie loves reading and writing also but is hindered due to time constraints.