How to access iframe inside and iframe using pure javascript

Question

I have the below code that is in my DOM and I want to get height of the #iframe2

Basically, I have to change the height of #iframe1 whenever the height of #iframe2 changes. I have added a link to screenshot below for what I am exactly trying to achieve.

https://i.sstatic.net/UCXvC.png

<div id="gpt-leaderboard">
   <iframe id="iframe1">
         <iframe id="iframe2" >
           <!-- Banner with dynamic height loads here-->
         </iframe>
    </iframe>
 </div>

I am using the below code to get the height but it is not working

document.getElementById("gpt-leaderboard").getElementsByTagName('iframe')[0].getElementsByTagName('iframe')[0].style.height;

Any ideas why?

iframes have their own document so you will have to retrieve that in order to look inside them. iframe2 is nested inside the iframe1 document, not inside the iframe1 tag. — jfriend00
– jfriend00, Commented Oct 15, 2013 at 22:11
I think you have an extra getElementsByTagName() method in there. — Shabab
– Shabab, Commented Oct 15, 2013 at 22:12

Lee · Accepted Answer · 2013-10-15 22:21:17Z

2

What you are trying to do will not work assuming your implementation is that your two iframes are nested in the main page.

when iframe1 is loaded, it will be defaulted to a blank document. This will mean iframe2 is removed, as anything inside the <iframe> tag will be replaced.

To just get your HTML correct, you will have to have your first iframe's src attribute set to a page containing iframe2

Edit: You can see an example of one approach using jquery here: http://jsfiddle.net/D9BX8/ (note: i have used jquery instead of "raw JS" since it's what i know. I'm sure with some googling you can translate it down to basic JS if you don't use jquery on your site)

edited Oct 15, 2013 at 22:21

answered Oct 15, 2013 at 22:13

Lee

10.6k4 gold badges39 silver badges45 bronze badges

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

2 Comments

trio Over a year ago

Things is I cannot use jQuery. I have to write it in pure JS. Using jQuery would have made it much simpler :(

Lee Over a year ago

jQuery is just a library. It still boils down to standard JS. You just need to work out how. A i said, it was just an example showing that it's possible to do, once you ensure your HTML is correct and present.

Collectives™ on Stack Overflow

How to access iframe inside and iframe using pure javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related