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>的{{1}}和window属性-browser方式（不使用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中的每个项目伪数组代表窗口对应于给定的对象＆lt; frame＆gt;或＆lt; iframe＆gt;的内容，不是（i）框架DOM元素（即 window.frames [0]是一回事 as document.getElementsByTagName（ “iframe”）[0] .contentWindow）

Answer 3

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

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

.contentDocument是iframe中页面的window.document，与contentWindow.document一样，但不是.contentDocument.document。

Chrome可能会在以后的某个版本中包含对.contentDocument的支持 - 我希望如此，因为它也是所有其他浏览器找到包含在Object元素中的文档的方式，键入text/html，其中data属性是html页面的URL。

Answer 4

我认为这是一种非常简单的跨浏览器方式

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

你可以测试它

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

4 个答案: