101

I have a iframe like this

<iframe name="myframe1" id="myframe1" width="100%" height="100%" src="a.html">
<html>
 <head></head>
 <frameset name="myframe2" cols="0%, 100%" border="0" frameBorder="0" frameSpacing="0">
 <frame name="page1" src="c.html" scrolling="no"></frame>
 <frame name="page2" src="d.html" >
 <html>
 <head></head>
 <body id="top">
 <div id="div1">
 <div id="div2">
 <div id="div3">
 <ul id="x">
 <li>a</li>
 <li>b</li>
 </ul>
 </div>
 </div>
 </div>
 </body>
 </html>
 </frame>
 </frameset>
</html>
</iframe>

I want to refer to the element "x". I tried in several ways but I couldn't find a solution.

Leigh
28.9k10 gold badges58 silver badges109 bronze badges
asked Jan 22, 2013 at 3:58
1

6 Answers 6

222 
document.getElementById('myframe1').contentWindow.document.getElementById('x')

Fiddle

contentWindow is supported by all browsers including the older versions of IE.

Note that if the iframe's src is from another domain, you won't be able to access its content due to the Same Origin Policy.

answered Jan 22, 2013 at 4:08
Sign up to request clarification or add additional context in comments.

2 Comments

The last sentence is very important ;) you frame's source must be on the same domain of your page
But what if frame's source not belongs to the same domain ? How to solve it? Regards, Mik.
27

use contentDocument to achieve this

var iframe = document.getElementById('iframeId');
var innerDoc = (iframe.contentDocument) 
 ? iframe.contentDocument 
 : iframe.contentWindow.document;
var ulObj = innerDoc.getElementById("ID_TO_SEARCH");
answered Jan 22, 2013 at 4:10

Comments

8

(this is to add to the chosen answer)

Make sure the iframe is loaded before you

contentWindow.document

Otherwise, your getElementById will be null.

PS: Can't comment, still low reputation to comment, but this is a follow-up on the chosen answer as I've spent some good debugging time trying to figure out I should force the iframe load before selecting the inner-iframe element.

answered Jun 24, 2019 at 15:43

Comments

3

You need to make sure the frame is fully loaded the best way to do it is to use onload:

<iframe id="nesgt" src="" onload="custom()"></iframe>
function custom(){
 document.getElementById("nesgt").contentWindow.document;
 }

this function will run automatically when the iframe is fully loaded.

answered Jun 30, 2020 at 13:29

Comments

3

In my case I was trying to grab pdfTron toolbar, but unfortunately its ID changes every-time you refresh the page.

So, I ended up grabbing it with this one-liner:

const pdfToolbar = document.getElementsByTagName('iframe')[0].contentWindow.document.getElementById('HeaderItems');

As in the array written by tagName you will always have the fixed index for iFrames in your application.

questionto42
9,9248 gold badges80 silver badges125 bronze badges
answered Jun 26, 2019 at 8:05

Comments

1

Apologies I don't have enough reputations to add a comment but maybe writing an answer is ok in this case. I've been looking to change the css of some html in an Iframe. I have a bookmarklet code which works outside an iframe so I'm nearly there:

javascript:(function(){ var style = document.createElement('style'), styleContent = document.createTextNode('.notifications-list--cMVsqVbKkaXV4SQ {zoom: 0.8!important;}'); style.appendChild(styleContent); var caput = document.getElementsByTagName('head'); caput[0].appendChild(style); })();

my iframe is called xm-feed-iframe

so I guessed you'd change the code to

document.getElementById('xm-feed-iframe').contentWindow.document.getElementById('x')

But I needed to work with a class in order to change the css styles. So I guess it might be as simple as changing

var caput = document.getElementsByTagName('head')

to

var caput = document.getElementById('xm-feed-iframe').contentWindow.document.getElementsByTagName('head')

so the final code would be

javascript:(function(){ var style = document.createElement('style'), styleContent = document.createTextNode('.notifications-list--cMVsqVbKkaXV4SQ {zoom: 0.8!important;}'); style.appendChild(styleContent); var caput = document.getElementById('xm-feed-iframe').contentWindow.document.getElementsByTagName('head'); caput[0].appendChild(style); })();

And hey presto it worked. I can now delve a little deeper and add some counters hopefully to the list which appears in the iframe! :)

Any comments about the code would be most appreciated as I'm self taught!

Hope this helps someone else

Thanks

UPDATE: Here we are - I know have a numbered list using a bookmarklet. My life will be so much easier now as I will no longer loss track of all the items I need to download. :D

enter image description here

answered Feb 9, 2023 at 11:33

1 Comment

Good answer, from top webpage DOM calling into iframe: document.getElementById('xm-feed-iframe').contentWindow.document.getElementsById('inside-iframe')

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.