代码之家 › 专栏 › 技术社区 › Bungle

访问<iframe>元素的窗口和文档的最简洁的跨浏览器方式是什么?

document cross-browser iframe dom javascript

25

Bungle · 技术社区 · 15 年前

<iframe> 元素的 window document 父页中的属性。这个 <iframe> 可以通过JavaScript创建,也可以通过存储在对象属性或变量中的引用进行访问,因此,如果我理解正确,则排除了使用 document.frames .

我见过很多方法,但我不确定最好的方法。给予 <iframe>

var iframe = document.createElement('iframe');
document.getElementsByTagName('body')[0].appendChild(iframe);

我正在使用此访问 ,而且在主要浏览器中似乎都能正常工作:

var doc = iframe.contentWindow || iframe.contentDocument;
if (doc.document) {
  doc = doc.document;
}

我也看到了这种方法:

var iframe = document.getElementById('my_iframe');

iframe = (iframe.contentWindow) ? iframe.contentWindow :
         (iframe.contentDocument.document) ? iframe.contentDocument.document :
         iframe.contentDocument;

iframe.document.open();
iframe.document.write('Hello World!');
iframe.document.close();

这让我很困惑,因为如果 iframe.contentDocument.document 定义了,你将最终尝试访问 iframe.contentDocument.document.document .

var frame_ref = document.getElementsByTagName('iframe')[0];

var iframe_doc = frame_ref.contentWindow ? frame_ref.contentWindow.document :
    frame_ref.contentDocument;

最后,我想我很困惑,哪些属性包含哪些属性,是否 contentDocument 相当于或者是否有这样的财产 contentDocument.document 等等。

有人能告诉我这些酒店的准确/及时的参考资料吗,或者简要介绍一下如何有效地访问 <iframe> 的 文件 跨浏览器的属性(不使用jQuery或其他库)?

4 回复 | 直到 15 年前

1

12

yodabar Arkana 11 年前

在这段时间里,我做了很多测试,最后得出了一个简短但健壮的语法,它适用于我可以测试的每一个浏览器:

var doc = iframe.contentDocument ?
iframe.contentDocument : (iframe.contentWindow.document || iframe.document);

编辑: @dagnabit注意到 iframe.contentWindow.document iframe.contentWindow 未设置,将阻止代码执行,不允许 iframe.document
所以我改进了我的代码:

var doc = iframe.contentDocument ?
    iframe.contentDocument :
    (iframe.contentWindow ? iframe.contentWindow.document : iframe.document);

是IE5的解决方案。

2

11

Dagg Nabbit 15 年前

有一种更简单的方法,它存在的时间更长。。。使用 window.frames

按姓名或身份证:

var iframe_doc = window.frames.my_iframe.document;

或者如果您愿意:

var iframe_doc = window.frames['my_iframe'].document;

或按索引:

var iframe_doc = window.frames[0].document;

窗口.frames 在这里: http://developer.mozilla.org/en/DOM/window.frames

节选:

伪数组表示窗口对象与给定的 (i)框架DOM元素(即。窗口.frames[0]也是一样 “iframe”)[0].contentWindow)

3

Kerem 10 年前

除了Chrome之外,所有的现代浏览器都支持这两种功能 iframereference.contentWindow 和 iframereference.contentDocument ,但前提是在iframe中打开的页面与包含iframe的页面位于同一域中。

要包含Chrome,请使用 var iwin=iframereference.contentWindow, idoc=iwin.document;

.contentDocument window.document 在iframe页面中, 按原样 contentWindow.document ,但不是 .contentDocument.document

Chrome可能支持在将来的某个版本中,我希望如此,因为这也是所有其他浏览器查找包含在对象元素type中的文档的方式 text/html

4

0

iman 12 年前

//get document object of IFRAME
if(typeof frame.contentDocument!='undefined') {
    iframeDocument=frame.contentDocument;
} else {
    iframeDocument=frame.document;
}
//get window object of IFRAME
if(typeof frame.contentWindow!='undefined') {
    iframeWindow=frame.contentWindow;
} else {
    iframeWindow=frame.window;
}

你可以测试一下