What Is an iframe? – Definition and How It Works
Learn what an iframe is, how the same-origin policy limits access, why automation must switch frames, and where iframes appear in practice.
An iframe embeds one HTML document inside another. Each frame has its own document, its own scripting context, and — critically — its own origin.
1. What It Creates
A nested browsing context.
- Its own document tree, separate from the parent's.
- Its own scripts, running in a separate context.
- Its own origin, which governs what the parent may access.
<iframe src="https://payments.example.com/form" title="Payment"></iframe>
2. The Same-Origin Boundary
If the frame's origin differs from the parent's, the parent cannot read its DOM, and vice versa. Scheme, host, and port must all match for access to be permitted.
This is a security feature, and it is why an embedded payment form cannot be read by the page hosting it — the whole point of embedding it that way.
3. Why Automation Must Switch Frames
Document-level queries do not descend into frames. An element visible on screen inside an iframe is invisible to a selector run against the page.
frame = page.frame_locator("iframe[title='Payment']")
frame.locator("#card-number").fill("...")
Every automation library provides a frame-addressing mechanism, and a timeout on an element that is plainly visible is very often this problem.
4. Identifying the Right Frame
Frames can be addressed by name, by URL pattern, by index, or by a selector on the frame element. Prefer name or URL: index-based selection breaks whenever the page adds another frame, including advertisement frames that appear intermittently.
5. Where Iframes Appear
| Use | Why |
|---|---|
| Payment forms | Keeps card data out of the host page's origin |
| Verification widgets | Isolates the provider's script and state |
| Embedded media | Third-party players and maps |
| Advertisements | Isolation between advertiser and publisher |
| Legacy application shells | Composing older systems into a new page |
6. Attributes Worth Knowing
sandbox— restricts what the frame may do, from scripts to form submission.allow— grants permissions such as camera or geolocation.loading="lazy"— defers loading until near the viewport, meaning the frame may not exist yet.referrerpolicy— controls what referrer information the frame receives.
Lazy loading matters for automation: the frame appears only after scrolling, so a wait must account for it.
7. Practical Guidance for Extraction
- Check whether missing content sits inside a frame before debugging selectors.
- Address frames by name or URL rather than index.
- Wait for the frame, then for the element inside it — two conditions, not one.
- Expect cross-origin frames to be readable only through their own rendered content.
- Scroll first where frames load lazily.
8. Summary
An iframe embeds an independent document with its own origin and scripting context, isolated from the parent by the same-origin policy.
For automation the consequence is concrete: content inside a frame requires switching into that frame first, and a selector that "should match" but times out is very often looking at the wrong document.