Cannot set document.body.innerHTML of IFrame in Firefox

Question

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>

Rob W · Accepted Answer · 2011-10-20T08:30:35.413

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:" ", 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.}

Well, I tried this, and it works in Safari, but not in Firefox. Any other ideas? — Timothy Miller, Oct 19 '11 at 22:13
Boris's answer is probably more pedantically correct (web developers do lots of things that you "should't"), but your answer is the one I like better, because it doesn't require me to radically restructure this web application I've inherited. Thanks! — Timothy Miller, Oct 20 '11 at 15:18

score 16 · Answer 2 · answered Oct 19 '11 at 23:19

16

You're setting the innerHTML while there's an in-flight about:blank load for the iframe. When that finishes loading, it replaces the document you modified.

If you do your modification off the iframe's onload it will work in all browsers.

answered Oct 19 '11 at 23:19

Boris Zbarsky

34,758
5
52
55

Thank you so much! – wopolow Jul 19 '17 at 13:45

score 2 · Answer 3 · answered Dec 16 '11 at 06:39

2

I tested this code with firefox and ie and it works. You must wait the completion of page load before modify contents. I used the load event of body.

<html> 
<head>
<script type="text/javascript"> 
var Fill_Iframe=function(){document.getElementById("IFRAME2").contentWindow.document.body.innerHTML = '<p>testo</p>';}; 
</script>
</head>

<body onload="Fill_Iframe()"> 

<iframe name="IFRAME2" id="IFRAME2" > 
</iframe> 

</body> 
</html>

answered Dec 16 '11 at 06:39

Leonardo Danza

67
5

1

By the way, you should use `window.onload` in the script instead of ``. Also, the `name` on the `` isn't needed, and generally element ids are written in lowercase. In HTML5, a script `type` is optional, and using `text/javascript` is deprecated. Newer browsers will assume the new `application/javascript`, and older browsers that don't understand `application/javascript` will assume `text/javascript` when `type` is omitted. – uınbɐɥs Nov 04 '12 at 07:34

Cannot set document.body.innerHTML of IFrame in Firefox

3 Answers3

Linked