Home arrow JavaScript arrow Working with IFRAME in JavaScript
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Working with IFRAME in JavaScript
(Page 1 of 6 )

  

NOTE: For an updated version of this article on IFRAMES and JavaScript, please visit:

http://www.devarticles.com/c/a/JavaScript/JavaScript-and-jQuery-IFRAME-Elements/

  

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>


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks
- Dynamic jQuery Styling

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 8 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials