2

我创建了一个带有空 iframe 的页面。然后我可以选择 iframe 文档并导航到它的正文：

var iframe = document.getElementsByTagName('iframe')[0];
var doc = iframe.contentDocument || iframe.contentWindow.document;
var body = doc.body;
console.log("Body is", body);

在 Firefox 和 chrome 中，这给了我 body 对象。在 IE10 中它给了我空值。

这是一个演示该问题的 Jsbin。打开 JS、控制台、输出面板，然后单击“使用 JS 运行”。

两个问题：

  1. 如何以跨浏览器的方式访问 iframe 的主体？
  2. 哪个是正确的“符合规范”的行为？
4

3 回答 3

6

我今天早些时候遇到了类似的问题。似乎 IE，至少 9 和 10，没有正确创建 iframe 主体（当我使用开发人员工具时，我能够在 iframe 中看到一个主体标签，但就像你无法调用它一样），当没有指定的src。它给你 null 因为它不存在。

对于是否有跨浏览器方式访问 iframe 的正文，答案是否定的。但是，您可以使用解决方法。首先，检查 iframe body 是否存在，如果不存在，则创建它。

您的代码如下所示：

var iframe = document.getElementsByTagName('iframe')[0];
var doc = iframe.contentDocument || iframe.contentWindow.document;

// The workaround
if (doc.body == null) {       // null in IE
    doc.write("<body></body>");
}

var body = doc.body;
console.log("Body is", body);

来源：http ://forums.asp.net/t/1686774.aspx/1

于 2013-03-02T00:50:18.353 回答
0

此代码适用于我的跨浏览器：

var doc=ifr.contentWindow||ifr.contentDocument;
if (doc.document) doc=doc.document;
var body=doc.getElementByTagName("body")[0];
于 2013-03-02T01:15:53.193 回答
0

一年多后，但我相信解决方案是致电

doc.open()
//make any modifications
doc.close()
//at this point doc.body will not be null

这使得事情以相当一致的方式跨浏览器工作

于 2014-04-28T19:34:33.447 回答