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.
Next: How to write content dynamically into IFRAME using JavaScript: discussion >>
More JavaScript Articles
More By Jagadish Chaterjee
/ 126 
