JavaScript write to IFrame

This section illustrates you how to write to IFrame using JavaScript.

The <iframe> tag defines an inline frame which allows to embed an HTML document inside another HTML document. In the given example, we have created a simple HTML page adding a div element and a function writeToIFrame() which is called when the page is loaded. The method createElement() of document object creates a html iframe element. The variable div grabs the id of the div element which is added to the iframe?s document element by using the method appendChild().

Following code allows to display the iframe's document on Firefox:

if(iframe.contentDocument)
doc = iframe.contentDocument ;

Following code allows to display the iframe's document on Internet Explorer:

else if(iframe.contentWindow)
doc = iframe.contentWindow.document;

Here is the code:

<html>
<h2>Write to IFrame using JavaScript</h2>
<script>
function writeToIFrame() {
var iframe = document.createElement("iframe");
var div = document.getElementById("div");
div.appendChild(iframe);
var doc = null;
if(iframe.contentDocument)
doc = iframe.contentDocument;
else if(iframe.contentWindow)
doc = iframe.contentWindow.document;
doc.open();
doc.write("Hello World!");
doc.close();
}
</script>
<body onLoad="writeToIFrame();">
<div id="div" style="border: solid 1px; height: 250px; width: 400px;"></div>
</body>
</html>

Output will be displayed as:

Download Source Code:

JavaScript write to IFrame

JavaScript write to IFrame

JavaScript write to IFrame

Tutorials