How do I get this child html element in JavaScript?

Question

I have an iframe that looks like this:

<iframe id="iframe2" ...>
    #document
        <html>...</html>
</iframe>

I am trying to get the item underneath the iframe with the html tag.
In JavaScript, when I do:

document.getElementByID("iframe2")

this returns the correct iframe.

However, when I do this:

document.getElementByID("iframe2").childNodes

the return value is [].

document.getElementByID("iframe2").getElementsByTagName("#document") and document.getElementByID("iframe2").getElementsByTagName("html") also return [].

How do I access that html tag?
Also, what is that #document tag called?

possible duplicate of http://stackoverflow.com/questions/926916/how-to-get-body-content-of-iframe-by-javascript — kapa, Jun 15 '12 at 15:49
Sounds very much like this: http://stackoverflow.com/questions/1088544/javascript-get-element-from-within-an-iframe — Hauke Haien, Jun 15 '12 at 15:49
There's something wrong. What is #document exactly? Isn't it just a text? Mixing text with html tags can result in the whole content considered as a text node. — Kamyar Infinity, Jun 15 '12 at 15:58
@Kamyar `#document` is not a real child node; it's a placeholder inserted by Chrome dev tools (possibly Firebug as well?) that represents the iframe's `contentDocument` property. — apsillers, Jun 15 '12 at 16:11
@Kamyar #document is just what it looks like. When I do an inspect elements, there is a "#document" nested inside the iframe. — Di Zou, Jun 15 '12 at 16:11

apsillers · Accepted Answer · 2012-06-15T16:02:08.307

6

document.getElementByID("iframe2").contentWindow.document

Or, the variant not supported by older IE,

document.getElementByID("iframe2").contentDocument

This will get you the document object of the embedded page, and from there you can use .documentElement, .body or .head properties to get the html/body/head DOM.

If you want the window object of the embedded page, use contentWindow instead of contentDocument.

MDN has a guide to iframe scripting that you will probably find helpful.

edited Jun 15 '12 at 16:02

answered Jun 15 '12 at 15:49

apsillers

112,806
17
235
239

I get "null" or "undefined" when I try either of those. I also get a "Unsafe JavaScript attempt to access frame" error – Di Zou Jun 15 '12 at 16:12
4

That means the frame is cross-domain. For security reasons, you cannot access an iframe with a cross-domain origin. (Imagine if any page on the Web could just open your Gmail inbox and search through the DOM of the page -- a security disaster.) – apsillers Jun 15 '12 at 16:15
Yea this is it. The frame is cross-domain. Thanks! – Di Zou Jun 15 '12 at 16:48

score 2 · Answer 2 · edited Aug 20 '18 at 21:12

2

Please try this code:

var a = document.getElementById("iframe2").firstChild;

edited Aug 20 '18 at 21:12

Unmitigated

76,500
11
62
80

answered Jun 15 '12 at 15:46

Bunlong

652
1
9
21

score 2 · Answer 3 · edited Jul 24 '12 at 20:41

2

Try this :

var a = document.getElementById("iframe2").getElementsByTagName("*")[0];

edited Jul 24 '12 at 20:41

Dave

6,141
2
38
65

answered Jun 15 '12 at 15:56

Alexandre Khoury

3,896
5
37
58

Matt Coughlin · Answer 4 · 2012-06-15T16:30:53.003

0

Does the URL for the IFrame content have the same domain as the parent page? If not, you won't be able to access anything inside the IFrame due to the same-origin policy.

edited Jun 15 '12 at 16:30

answered Jun 15 '12 at 16:09

Matt Coughlin

18,666
3
46
59

How do I get this child html element in JavaScript?

4 Answers4

Linked