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 stackoverflow.com/questions/926916/… — kapa
– kapa, Commented Jun 15, 2012 at 15:49
Sounds very much like this: stackoverflow.com/questions/1088544/… — Hauke Haien
– Hauke Haien, Commented Jun 15, 2012 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
– Kamyar Infinity, Commented Jun 15, 2012 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
– apsillers, Commented Jun 15, 2012 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
– Di Zou, Commented Jun 15, 2012 at 16:11

apsillers · Accepted Answer · 2012-06-15 16:02:08Z

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, 2012 at 16:02

answered Jun 15, 2012 at 15:49

apsillers

116k18 gold badges248 silver badges249 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Di Zou Over a year ago

I get "null" or "undefined" when I try either of those. I also get a "Unsafe JavaScript attempt to access frame" error

apsillers Over a year ago

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

Di Zou Over a year ago

Yea this is it. The frame is cross-domain. Thanks!

Dave · Accepted Answer · 2012-07-24 20:41:04Z

2

Try this :

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

edited Jul 24, 2012 at 20:41

Dave

6,1892 gold badges41 silver badges67 bronze badges

answered Jun 15, 2012 at 15:56

Alexandre Khoury

4,0625 gold badges40 silver badges59 bronze badges

Comments

Unmitigated · Accepted Answer · 2018-08-20 21:12:49Z

2

Please try this code:

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

edited Aug 20, 2018 at 21:12

Unmitigated

91.4k12 gold badges102 silver badges109 bronze badges

answered Jun 15, 2012 at 15:46

Bunlong

6621 gold badge9 silver badges22 bronze badges

Comments

Matt Coughlin · Accepted Answer · 2012-06-15 16:30:53Z

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, 2012 at 16:30

answered Jun 15, 2012 at 16:09

Matt Coughlin

18.9k3 gold badges48 silver badges59 bronze badges

Collectives™ on Stack Overflow

How do I get this child html element in JavaScript?

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related