What's the most concise cross-browser way to access an <iframe> element's window and document?

Question

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.

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

I've also see this approach:

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(); 

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.

There's also this:

var frame_ref = document.getElementsByTagName('iframe')[0];  var iframe_doc = frame_ref.contentWindow ? frame_ref.contentWindow.document :     frame_ref.contentDocument; 

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.

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)?

Thanks for any help!

Answer 1

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 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); 

NOTE: iframe.document is a workaround for IE5.

Answer 2

There's an easier way that's been around longer... use window.frames to get a reference to the frame's window object.

By name or id:

var iframe_doc = window.frames.my_iframe.document; 

or if you prefer:

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

or by index:

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

Good reference for window.frames here: http://developer.mozilla.org/en/DOM/window.frames

An excerpt:

each item in the window.frames pseudo-array represents the window object corresponding to the given <frame>'s or <iframe>'s content, not the (i)frame DOM element (i.e. window.frames[ 0 ] is the same thing as document.getElementsByTagName( "iframe" )[ 0 ].contentWindow)