| Making DIV more dynamic to write into IFRAME |
Now, let us try to develop a simple script (JavaScript) which extends the script shown in the previous sections. The entire code for the sample is as follows:
<html>
<head>
<meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
<script id="clientEventHandlersJS" language="javascript">
<!--
function Show(val)
{
var tDiv = document.getElementById("dvSample");
var FirstElement = tDiv.firstChild;
var v = FirstElement.nodeValue;
var val2 = v.replace(/\%message\%/g, val);
var tFrame = document.getElementById("myFrame");
var doc = tFrame.contentDocument;
if (doc == undefined || doc == null)
doc = tFrame.contentWindow.document;
doc.open();
doc.write(val2);
doc.close();
document.all.myFrame.style.visibility="visible";
}
function Button1_onclick() {
var v = document.all("txtHTML").value;
Show(v);
}
//-->
</script>
</head>
<body>
<div id="dvSample">
<!--
<html>
<body>
%message%
</body>
</html>
-->
</div>
<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 some HTML: <input type=text id="txtHTML"><input type="button" value="Show" id="Button1" name="Button1" onclick="return Button1_onclick()">
</form>
</body>
</html>
Within the above code, I made a dynamic drive by giving the flexibility to the user to enter his own information, which can be carried as content to IFRAME.
The HTML (or any information) entered by the user gets accepted into the textbox and we transfer that information to the function “show.” The DIV contains a suspicious word, “%message%”. We use this word to replace the content entered within the textbox. This is one of the very clever techniques used in writing content to IFRAME dynamically. |
| Return to Listing |