Menu
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>
696
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.
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.
170
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.
45
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
