无法在 Firefox 中设置 IFrame 的 document.body.innerHTML
Posted
技术标签:
【中文标题】无法在 Firefox 中设置 IFrame 的 document.body.innerHTML【英文标题】：Cannot set document.body.innerHTML of IFrame in Firefox 【发布时间】：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>
【问题讨论】：
【参考方案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。以上是关于无法在 Firefox 中设置 IFrame 的 document.body.innerHTML的主要内容，如果未能解决你的问题，请参考以下文章
即使使用 P3P 标头，也无法在 IE 的 IFRAME 中设置 cookie
无法在 Firefox Developer Edition (FDE) 的调试器窗格中设置断点