How to pick element inside iframe using document.getElementById

Question

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.

Possible duplicate of [Get element from within an iFrame](https://stackoverflow.com/questions/1088544/get-element-from-within-an-iframe) — Lying_cat, Apr 19 '18 at 07:49

score 194 · Accepted Answer · answered Jan 22 '13 at 04:08

194

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 '13 at 04:08

Fabrício Matté

67,789
24
124
163

52

The last sentence is very important ;) you frame's source must be on the same domain of your page – Sali Hoo Nov 08 '13 at 17:59
2

But what if frame's source not belongs to the same domain ? How to solve it? Regards, Mik. – javalonde Aug 16 '21 at 13:33

Hary · Answer 2 · 2018-10-05T14:53:16.610

23

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");

edited Oct 05 '18 at 14:53

answered Jan 22 '13 at 04:10

Hary

5,514
7
36
75

score 5 · Answer 3 · answered Jun 24 '19 at 15:43

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

Mostafa Esmaeili · Answer 4 · 2021-12-22T15:48:36.047

1

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.

edited Dec 22 '21 at 15:48

answered Jun 30 '20 at 13:29

Mostafa Esmaeili

65
8

score 0 · Answer 5 · answered Jun 26 '19 at 08:05

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 by doing so.

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.

How to pick element inside iframe using document.getElementById

5 Answers5

Linked

Related