无法在 Firefox 中设置 IFrame 的 document.body.innerHTML答案

【问题标题】：Cannot set document.body.innerHTML of IFrame in Firefox无法在 Firefox 中设置 IFrame 的 document.body.innerHTML
【发布时间】：2011-12-11 07:49:28
【问题描述】：

我一直在寻找一种跨浏览器的方式来以编程方式设置 IFrame 的 innerHTML。（如http://roneiv.wordpress.com/2008/01/18/get-the-content-of-an-iframe-in-javascript-crossbrowser-solution-for-both-ie-and-firefox/）。我已经编写了一些示例代码（如下），我可以让它在 Safari 和 Chrome 中运行，但不能在 Firefox 中运行。谁能帮我弄清楚我需要做什么（以便携式方式）？

<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>

【问题讨论】：

标签： html firefox iframe innerhtml

【解决方案1】：

在 Firefox 中，当没有设置初始内容时，似乎无法识别框架的内容。解决这个问题的最简单方法，如下代码所示：

//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>';

另一种方法是将src 属性设置为javascript:"&nbsp;"，并注册一个一次性加载事件处理程序。这种方法稍微复杂一些，所以我就不详细描述了。

^{可以通过frame 对象按名称访问每个框架的窗口对象。

所以，我建议使用以下代码：

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

document.documentElement 指的是文档的根元素，通常是<html>。当您调用当前代码时，document 的 body 属性可能还没有准备好。通过引用根元素，这个问题就被规避了。}

【讨论】：

好吧，我试过了，它在 Safari 中有效，但在 Firefox 中无效。还有其他想法吗？
鲍里斯的回答可能更迂腐正确（网络开发人员做了很多你“不应该”做的事情），但你的回答是我更喜欢的，因为它不需要我从根本上重构我继承的这个 Web 应用程序。谢谢！

【解决方案2】：

当 iframe 正在运行 about:blank 加载时，您正在设置 innerHTML。加载完成后，它将替换您修改的文档。

如果您对 iframe 的 onload 进行修改，它将适用于所有浏览器。

【讨论】：

非常感谢！

【解决方案3】：

我用 Firefox 和 ie 测试了这段代码，它可以工作。您必须等待页面加载完成才能修改内容。我使用了body的load事件。

<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>

【讨论】：

顺便说一句，您应该在脚本中使用window.onload 而不是<body onload="...">。此外，<iframe> 上的 name 也不需要，通常元素 ID 以小写字母书写。在 HTML5 中，脚本 type 是可选的，不推荐使用 text/javascript。较新的浏览器将采用新的application/javascript，而不理解application/javascript 的旧浏览器将在省略type 时采用text/javascript。