How to get all nested iframes on document?

I found many related questions but none of them had a solution that worked for me, so apologies if this is a dupe.

I have the following HTML structure (simplified) :

<html>
<head>
</head>
<body style="">
    <div>
        <div>
            <div>
                <iframe>
                    <html>
                        <head></head>
                        <body>
                            <div></div>
                            <iframe>
                                <html>
                                    <head></head>
                                    <body>
                                        <div>
                                            <iframe src="about:blank">
                                                <html>
                                                    <head></head>
                                                    <body>
                                                        <img />
                                                        <iframe id="some_random_id">
                                                            <html>
                                                                <head></head>
                                                                <body>
                                                                    <div>
                                                                        <!-- main content -->
                                                                    </div>
                                                                </body>
                                                            </html>
                                                        </iframe>
                                                    </body>
                                                </html>
                                            </iframe>
                                        </div>
                                    </body>
                                </html>
                            </iframe>
                        </body>
                    </html>
                </iframe>
            </div>
        </div>
    </div>
</body>
</html>

And I would like to retrieve all the iframes, ideally in an array. I have tried the following:

document.getElementsByTagName('iframe')

But that returns an array of size 1 : [iframe]

window.frames.length give me 1

I thought about doing something like :

var a = document.getElementsByTagName('iframe')[0]
var b = a.getElementsByTagName('iframe')[0] 
// b is undefined
var b = a.contentDocument.getElementsByTagName('iframe')[0]
// b is undefined

Is there any way to retrieve all iframe on the page? Alternatively, just getting the last one (the one with the id some_random_id) would works as fine, but I can't use the id to select it since the html is created by a third party.

Edit: I don't think my question is a duplicate of using document.getElementsByTagName on a page with iFrames - elements inside the iframe are not being picked up because the accepted answer in this question use:

for( j=0; j<m; j++) {
    ...
} 

Where m is document.getElementsByTagName('iframe').length. But in my case it would have the value 1 and thus I couldn't access the nested iframes.

728x90

1 Answers How to get all nested iframes on document?

You are using the <iframe> tag absolutely wrong! You would like to read the documentation from <iframe> tag:

Permitted content: Fallback content, i.e. content that is normally not rendered, but that browsers not supporting the <iframe> element will render.

In other words the content between <iframe> and </iframe> tags will be rendered, if the browser do not support the <iframe> element.

You have two possibilities to use <iframe> tag:

  1. In the src attribute from <iframe> tag you could write a path to HTML file.
  2. In the src attribute from <iframe> tag you could write "about:blank" and then using JS you could add the content to this <iframe>.

If you want find some elements or manipulate the content from this iframes you could use the following code:

var iframe = document.getElementById('iframeId'),
    innerDoc = iframe.contentDocument ? iframe.contentDocument 
             : iframe.contentWindow.document;

You should be sure that you have an access to your <iframe>.
Please read Cross-origin resource sharing (CORS) article about it.

If you want to get the count of all nested iframes on document you have to find it for each <iframe> separatelly and to add this count to your global iframe count variable. And do not forget about the CORS (see above).

4 months ago