Home/ Questions/Q 6699991
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T06:45:41+00:00

I’ve looked for a cross-browser way to programmatically set the innerHTML of an IFrame.

  • 0

I’ve looked for a cross-browser way to programmatically set the innerHTML of an IFrame. (As in http://roneiv.wordpress.com/2008/01/18/get-the-content-of-an-iframe-in-javascript-crossbrowser-solution-for-both-ie-and-firefox/). I’ve written some sample code (below), and I can get it to work in Safari and Chrome, but not Firefox. Can anyone help me figure out what I need to do instead (in a portable way)?

<html>
<body>

<div name=FRAME2div id=FRAME2div style="position:absolute; background-color:blue; color:black; border-color:black;border-width:0; left:100px; top:40px; width:200px; height:200px; overflow:scroll; display:block; " >
</div>

<script type="text/javascript">
document.getElementById("FRAME2div").innerHTML = '<iframe border=0 id=IFRAME2 name=IFRAME2 ></iframe>';
document.getElementById("IFRAME2").contentWindow.document.body.innerHTML = '<html><body><p>NETSCAPE</p></body></html>';
</script>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In Firefox, the frame’s content seems to not be recognised when no initial content has been set. The easiest method to solve this, is shown in the code below:

    //Note: ID is not necessary for this example
document.getElementById("FRAME2div").innerHTML = '<iframe id=IFRAME2 name=IFRAME2 ></iframe>';
var doc = frames["IFRAME2"].document;

//Trigger a page "load".
doc.open();
doc.close();
//Set innerHTML of the body tag.
doc.body.innerHTML = '<p>NETSCAPE</p>';

    Another method consists of setting the src property to javascript:"&nbsp;", and register an one-time load event handler. This method is slightly more complex, hence I do not describe it in a deeper detail.

    Every frame’s window object can be accessed through the frame object, by name.

    So, I recommend to use the following code:

    frames['IFRAME2'].document.documentElement.innerHTML = "<body>...</body>";

    document.documentElement refers to the root element of a document, usually <html>. It’s possible that the body property of document isn’t ready yet, when you call your current code. By referring to the root element, this problem is circumvented.

    • 0