What's the most concise cross-browser way to access an <iframe> element's window and document?
Posted
by Bungle
on Stack Overflow
See other posts from Stack Overflow
or by Bungle
Published on 2010-06-01T03:06:37Z
Indexed on
2010/06/01
3:13 UTC
Read the original article
Hit count: 356
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!
© Stack Overflow or respective owner