How can I target an element that is in an iFrame within another iFrame?

Question

I'm trying to target an element inside of an iFrame that is within another iFrame. Is it possible?

<iframe src="parent.html" id="parentFrame">

    <iframe src="child.html" id="childFrame">
        <!-- <div id="target-element"><div> -->
    </iframe>

</iframe>

Is the content of the two iframes hosted on the same domain? If so, follow [this answer](https://stackoverflow.com/a/1639342/519413) — Rory McCrossan, Jun 04 '21 at 19:39

score 0 · Answer 1 · answered Jun 04 '21 at 19:44

You can use this code:

<iframe src="frame1.html"></iframe>

In frame1.html you can do:

<iframe src="frame2.html"></iframe>

Then in frame2.html you can put the Div:

<div class="target"><!-- content here --></div>

The javascript will be as follows: function getDiv() { return document.querySelector('iframe').contentDocument.querySelector('iframe').contentDocument.querySelector('.target'); } Then use getDiv() to get the div you want to get.

How can I target an element that is in an iFrame within another iFrame?

1 Answers1