Home arrow JavaScript arrow Working with IFRAME in JavaScript
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
Rating: 4 stars4 stars4 stars4 stars4 stars / 247
March 01, 2006
TABLE OF CONTENTS:
  1. · Working with IFRAME in JavaScript
  2. · How to open a dynamic page in IFRAME using JavaScript
  3. · How to open a dynamic page in IFRAME using JavaScript: discussion
  4. · How to write content dynamically into IFRAME using JavaScript
  5. · How to write content dynamically into IFRAME using JavaScript: discussion
  6. · How to write content dynamically into IFRAME using JavaScript: another way

print this article
SEARCH DEVARTICLES

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

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




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