Cannot set document.body[removed] of IFrame in Fir

2019-04-08 08:06发布

站内问答 / 移动开发
1132 3 6

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>

3条回答
萌系小妹纸
2楼-- · 2019-04-08 08:22

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.

查看更多
0人赞 添加讨论(0) 举报
孤傲高冷的网名
3楼-- · 2019-04-08 08:31

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>
查看更多
0人赞 添加讨论(0) 举报
冷血范
4楼-- · 2019-04-08 08:49

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人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)