JAVASCRIPT

Working with IFRAME in JavaScript

This article starts by explaining the differences between FRAME, FRAMESET, and IFRAME and concludes with the concept of using JavaScript with IFRAME.

Author Info:

By: Jagadish Chaterjee

Poor Best

Rating:

/ 184

March 01, 2006

TABLE OF CONTENTS:

Within the code in the previous section, I mainly created a simple text box and a button. The textbox is named “txtWebSite” and the button is named “Button1.” The button is defined with an “onclick” event which calls a JavaScript function, “Button1_onclick”, which is defined as follows:

function Button1_onclick() {
var v = document.all("txtWebSite").value;
ShowWebSite(v);
}

The above function defines a variable “v” which is assigned with a value available (or typed) in the textbox “txtWebSite.” The same variable is passed as a parameter to another JavaScript function, “ShowWebSite.”

The function “ShowWebSite” is defined as follows:

function ShowWebSite(val)
{
document.all.myFrame.src=val;
document.all.myFrame.style.visibility="visible";
}

The above function simply assigns the website name (which I typed in the text box) as the source of IFRAME. This makes IFRAME search for that website and display it on the little block I specified through its style (or CSS). The most important aspect of the above code is that I made IFRAME invisible by default. It is shown only when the above function gets executed. You must observe “visibility:hidden” in the following tag available in the previous code.