Home arrow HTML arrow Page 2 - IFRAMES and its Rising Popularity
HTML

IFRAMES and its Rising Popularity


Inline frames AKA IFrames are becoming more rife in todays web developing realm due to its simplicity and user friendliness. Read more ...

Author Info:
By: Julie George
Rating: 4 stars4 stars4 stars4 stars4 stars / 14
June 06, 2003
TABLE OF CONTENTS:
  1. · IFRAMES and its Rising Popularity
  2. · The Article
  3. · Conclusion

print this article
SEARCH DEVARTICLES

IFRAMES and its Rising Popularity - The Article
(Page 2 of 3 )

Working of an Iframe

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

Scope of Iframes

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.

Inline Frames vs. Normal Frames

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.)

Sample code

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.

Common Application of Iframes

  1. Creating a simple vertical/horizontal scroll page without any JavaScript’s.
  2. Creating an entire menu driven webpage.
  3. Creating a simple display box for different images in the same page.
  4. Creating alternative information’s for the pages.
  5. 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

  1. Most of the older browser fails to recognize Iframes.
  2. Some attributes differ in different browsers.
  3. 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.

blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials