Cannot set document.body.innerHTML of IFrame in Firefox
Solution 1
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.
Solution 2
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.
Solution 3
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>
Timothy Miller
I am an Assistant Professor of Computer Science at Binghamton University (SUNY). I received my PhD from Ohio State in 2012. Prior to graduate school, I worked in industry for 9 years doing software engineering and digital circuit design (among other things). I am the principal designer of a graphics accelerator used in air traffic control display systems around the world, and I founded the Open Graphics Project. I currently do research in Computer Architecture, focusing on energy efficiency and reliability, making heavy use of machine learning and closed-loop control systems.
Updated on June 19, 2022Comments
-
Timothy Miller almost 2 years
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> -
Timothy Miller over 12 yearsWell, I tried this, and it works in Safari, but not in Firefox. Any other ideas?
-
Timothy Miller over 12 yearsBoris'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!
-
uınbɐɥs over 11 yearsBy the way, you should use
window.onloadin the script instead of<body onload="...">. Also, thenameon the<iframe>isn't needed, and generally element ids are written in lowercase. In HTML5, a scripttypeis optional, and usingtext/javascriptis deprecated. Newer browsers will assume the newapplication/javascript, and older browsers that don't understandapplication/javascriptwill assumetext/javascriptwhentypeis omitted. -
wopolow almost 7 yearsThank you so much!
