Home arrow JavaScript arrow Page 5 - 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 - How to write content dynamically into IFRAME using JavaScript: discussion
(Page 5 of 6 )

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

function ButtonShowMsg_onclick() {
var v = document.all("txtContent").value;
Show(v);
}

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

The function “Show” is defined as follows:

function Show(val)
{
        var testFrame = document.getElementById("myFrame");
        var doc = testFrame.contentDocument;
        if (doc == undefined || doc == null)
            doc = testFrame.contentWindow.document;
        doc.open();
        doc.write(val);
        doc.close();
    
      document.all.myFrame.style.visibility="visible";
}

Let me explain the above function part by part.  Let us first consider the following statement.

        var testFrame = document.getElementById("myFrame");

The above statement tries to retrieve the handle of the IFRAME, which is declared in our web page with the ID “myFrame.”  Further proceeding we have the following:

        var doc = testFrame.contentDocument;
        if (doc == undefined || doc == null)
            doc = testFrame.contentWindow.document;

To write some content to the IFRAME, we need to get the handle of the “document” object of the specific IFRAME.  This is achieved through the above statements.  The “if” statement is a simple “hack” to make it work with different browsers.  Further proceeding, we have the following:

        doc.open();
        doc.write(val);
        doc.close();

Once we get the handle of the “document” object of the respective IFRAME, we need to open it, write the content and close it.  All three above do the same.


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