Working with IFRAME in JavaScript
(Page 1 of 6 )
This article starts by explaining the differences between FRAME, FRAMESET, and IFRAME and concludes with the concept of using JavaScript with IFRAME.
All of the examples in this article can be directly tested, by simply copying and pasting the entire code of each section into any text file, saving it with the extension .HTM, and opening it using a browser.
What are FRAME, FRAMESET and IFRAME?
Every web designer would generally know what a FRAME (or FRAMESET) on a web page does. It simply maintains its own content without having any relation to other FRAMES.
A web page may be divided into several blocks using FRAMES. Every FRAME is generally assigned its own web page. The beauty of the FRAME is that it would never refresh unnecessarily for every post back of the web page. Only the FRAME on which the user is working gets refreshed, not the others.
To work with FRAME, we need to define FRAMESET. The FRAMESET internally contains FRAMEs divided logically based on necessity. Not every browser supports FRAMEs, but the majority of browsers do.
What about IFRAME? Another word for IFRAME is “Inline FRAME.” It is treated as a part of the web page (and not a web page part of FRAME, as in the previous case). The IFRAME is a small block on our web page which can be treated as a “nested browser” within our web page. This feature opens the door for displaying/showing other web pages as a part of our web page. But again a word of caution, not every browser supports it yet.
An IFRAME is very useful when we want to display the content from other web sites. We can also write some information (probably HTML) to IFRAME dynamically, treating it as a dynamic page itself. And another wonderful use of IFRAME is that we can use it for generating dynamic pull-down menus (or even horizontal menus), as it always stays ahead of any windowed control (like a dropdown list) on a web page. And finally we can use it for wonderful customized tool tips. To be frank, there are a lot more uses for IFRAMEs.
A simple usage of an IFRAME would be as follows:
<iframe id="Iframe1" frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" width="100" scrolling="yes" height="100" src="http://www.yahoo.com">
</iframe>
Next: How to open a dynamic page in IFRAME using JavaScript >>
More JavaScript Articles
More By Jagadish Chaterjee
/ 112 
