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

Question

我试图找出从父页面访问<iframe>元素window和document属性的最佳方法.所述<iframe>可以通过JavaScript创建或通过存储在对象属性或变量的引用访问,因此,如果正确地明白的是排除了使用的document.frames.

我已经看到了很多方法,但我不确定最好的方法.鉴于<iframe>以这种方式创建:

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

我目前正在使用它来访问它document,它似乎在主要浏览器上运行正常:

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是等价document还是有这样的属性contentDocument.document,等等.

任何人都可以指向我一个准确/及时参考这些属性,或就如何有效地访问一个快速简报<iframe>的window和document性能在一个跨浏览器的方式(不使用jQuery或其他库)？

谢谢你的帮助!

Answer 1

在我做了很多测试的时候,最后提出了这个简短而强大的语法,它适用于我可以测试的每个浏览器:

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

编辑: @DaggNabbit注意到iframe.contentWindow.document,如果iframe.contentWindow未设置参考错误,将阻止代码执行,不允许iframe.document返回.
所以我改进了我的代码:

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

注意:iframe.document是IE5的解决方法.

Answer 2

有一种更简单的方法可以更长时间...用于window.frames获取对框架窗口对象的引用.

按名称或ID:

var iframe_doc = window.frames.my_iframe.document;

或者如果您愿意:

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

或按索引:

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

window.frames这里有很好的参考:http://developer.mozilla.org/en/DOM/window.frames

摘录:

window.frames伪数组中的每个项表示对应于给定<frame>或<iframe>的内容的窗口对象,而不是(i)帧DOM元素(即window.frames [0]是相同的) document.getElementsByTagName("iframe")[0] .contentWindow)

Answer 3

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

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

.contentDocument是window.documentiframe 中页面的 ，原样是contentWindow.document，但不是.contentDocument.document。

Chrome 可能会在未来的某个版本中支持 -.contentDocument我希望如此，因为这也是所有其他浏览器查找包含在 Object 元素 type 中的文档的方式text/html，其中 data 属性是 html 页面的 url。