HTML

The power of DIV with IFRAME

This article mainly explains the benefits of using DIV to write dynamic content to IFRAME. I shall also guide you in developing your own library of functions to work with IFRAME effectively.

Author Info:

By: Jagadish Chaterjee

Poor Best

Rating:

/ 48

March 08, 2006

TABLE OF CONTENTS:

This is one of the more difficult tasks to work with. In this article, I try to help you “only a little” to write your own library to work with IFRAME. As you know, there always exists a chance to extend/enhance the same according to your needs. I will also try to use the concept of Objects in JavaScript now.

I start with a simple function as follows:

function IFrameBox(id, varName, width, height, url, msg)
{
      this.id = id;
      this.DivID = "IFrameDiv";
      this.Width = width;
      this.Height = height;
      this.VarName = varName;
      this.timeout_id = null;
      this.IFrameUrl = url;
      this.IFrame = document.getElementById(this.id);
      this.RenderContent();
      this.Show();
      this.Hide();
}

The above function simply works like a class with a constructor having six parameters. You can use the above class with a declaration as follows:

var IframeBox = new IFrameBox("frIFrame", "IframeBox", 147, 207)

The “frIFrame” is nothing but your own IFRAME declared within your HTML. You can retrieve the document of a frame using the following function (including the browser hacks):

IFrameBox.prototype.GetIFrameDocument = function()
{
      var doc;
      if( this.IFrame.contentDocument )
            // For NS6
            doc = this.IFrame.contentDocument;
      else if( this.IFrame.contentWindow )
            // For IE5.5 and IE6
            doc = this.IFrame.contentWindow.document;
      else if( this.IFrame.document )
            // For IE5
            doc = this.IFrame.document;
      else //other browser
            doc = this.IFrame.document;

return doc;
}

You can simply write any information into the IFRAME using a function similar to the following:

IFrameBox.prototype.RenderContent = function(msg)
{
var doc = this.GetIFrameDocument();

var style = " style='Background-Color: #aad5ff; FONT-FAMILY: Verdana; FONT-SIZE: 8pt; BORDER: #336699 1px solid; POSITION: absolute;' ";

      doc.open();
      doc.writeln("<body style='Margin: 0px;'>");
      doc.writeln("   <div id='" + this.DivID + "' align=center " + style + ">");
      doc.writeln("   </div>");
      doc.writeln("</body>");
      doc.close();
}

Next: Creating your own library to write dynamic content to IFRAME: utility functions >>