Working with IFRAME in JavaScript - How to open a dynamic page in IFRAME using JavaScript: discussion
(Page 3 of 6 )
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.
<iframe id="myFrame" frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0"
width="100" scrolling="yes" height="100" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; Z-INDEX: 999; LEFT: 20px; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; POSITION: absolute; TOP: 100px; visibility:hidden;">
</iframe>
Next: How to write content dynamically into IFRAME using JavaScript >>
More JavaScript Articles
More By Jagadish Chaterjee
/ 126 
