To perform actions insides iframes, you have to use css selector either inside or outside of the iframe, but never "through" both contexts.
Let's take an exemple, with the following HTML :
<div class="main">
<form id="my-form"></form>
<iframe>
<div class="frame-content">
<form id="my-form">
</form>
</div>
</iframe>
</div>
.main iframe
✅ ⇒ correctly return the iframe
#my-form
✅ ⇒ correctly return the 1st my-form (the one outside the iframe)
.main iframe .frame-content
❌ ⇒ not working, because .frame-content
belongs to the iframe document
.frame-content #my-form
✅ ⇒correctly return the form inside the iframe
iframe #my-form
❌ ⇒ not working because #my-form is already inside the iframe document
⚠️ When you need an element which is inside an iframe, we have to consider that everything outside the iframe content does not exist.
0 Comments