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();
}