Home arrow JavaScript arrow Page 4 - Working with IFRAME in JavaScript
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Working with IFRAME in JavaScript - How to write content dynamically into IFRAME using JavaScript
(Page 4 of 6 )

As you are now familiar with IFRAME (from reading the previous sections), I shall further proceed with another interesting ability: writing dynamically to IFRAME.  This has been a tedious job for any beginner who wanted to do it using JavaScript.

Now, let us try to develop a simple script (JavaScript) which shows a user specified message in an IFRAME. Have a look at the following code:

<html>
      <head>
            <meta  name=vs_targetSchema  content="http://schemas.microsoft.com/intellisense/ie5">
<script  id="clientEventHandlersJS"  language="javascript">
<!--
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";
}

function ButtonShowMsg_onclick() {
var v = document.all("txtContent").value;
Show(v);
}
//-->
            </script>
      </head>
      <body>
      <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>

            <form  id="form1">
                  Enter content:<input  type="text"  id="txtContent"  NAME="txtContent"  value="This is going to be sample content in IFRAME"> <input  type="button"  value="Show"  id="Button1"  name="ButtonShowMsg"  onclick="return ButtonShowMsg_onclick()">
            </form>
      </body>
</html>

The explanation for the above code is given in the next section.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- 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

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