什么是最简洁的跨浏览器方式访问< iframe>元素的窗口和文档？ [英] What's the most concise cross-browser way to access an <iframe> element's window and document?

问题描述

我试图找出访问< iframe> 元素的窗口 code> document 属性。 < iframe> 可以通过JavaScript创建或通过存储在对象属性或变量中的引用访问，因此，如果我理解正确，则排除使用 document.frames 。

I'm trying to figure out the best way to access an <iframe> element's window and document properties from a parent page. The <iframe> may be created via JavaScript or accessed via a reference stored in an object property or a variable, so, if I understand correctly, that rules out the use of document.frames.

我已经看到这样做了很多方法，但我不确定最佳方法。以这种方式创建< iframe> ：

I've seen this done a number of ways, but I'm unsure about the best approach. Given an <iframe> created in this way:

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

我目前正在使用它来访问文档，它似乎在主要的浏览器工作正常：

I'm currently using this to access the document, and it seems to work OK across the major browsers:

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 。

That confuses me, since it seems that if iframe.contentDocument.document is defined, you're going to end up trying to access 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 等。

In the end, I guess I'm confused as to which properties hold which properties, whether contentDocument is equivalent to document or whether there is such a property as contentDocument.document, etc.

任何人都可以指定我对这些属性的准确/及时的参考，或者快速介绍如何有效地访问<$ c $跨浏览器中的c>< iframe> 的窗口和文档属性（不使用jQuery或其他库）？

Can anyone point me to an accurate/timely reference on these properties, or give a quick briefing on how to efficiently access an <iframe>'s window and document properties in a cross-browser way (without the use of jQuery or other libraries)?

感谢任何帮助！

推荐答案

在我做了很多测试的时候，最后想出了这个简短而稳健的语法，可以在每个浏览器上测试：

During the time I made many tests, and finally came up with this short but robust syntax which works on every browser I could test:

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

EDIT： @DaggNabbit注意到 iframe.contentWindow.document 中的引用错误，如果 iframe.contentWindow 未设置，将阻止代码执行，不允许返回 iframe.document 。

所以我细化了我的代码： / p>

@DaggNabbit noticed that a reference error in iframe.contentWindow.document, if iframe.contentWindow is not set, would block the code execution, not allowing iframe.document to be returned.
So I refined my code:

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

注意： iframe.document 对于IE5。

这篇关于什么是最简洁的跨浏览器方式访问&lt; iframe&gt;元素的窗口和文档？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！