Open code, practice, and notes →
Download source with English comments · for reading
HTML · 21 iframe and Embedded Content Boundaries
Series contents · Technology map
Stage: Native UI and Media · External example · preview instructions · Storage ID: html-step-21
Goals and learning outcomes
- Check the frame’s purpose through its accessible name.
- Record whether the button runs under the two policies.
Prerequisites
The work and experiment records from Unit 20, “picture and Format Fallbacks”.
Key concepts and explanations
Frame Names
An iframe’s title identifies the purpose of the embedded region. Its role differs from the title of the internal page.
Restriction Policies
sandbox restricts features available to the embedded document. Select only necessary permissions and check their actual effects.
Practice setup
First check the execution scope guidance on the example screen. The following environment is for extending the assignment in a separate project. Implement it yourself in a separate local project and check it with browser developer tools. Prepare HTML and any necessary image/media files in a separate folder and open them through a local HTTP server. Check with the Elements and accessibility panels and actual keyboard operation.
The linked example is a starting point. It does not implement every task below. Complete work beyond its supported scope in a separate project.
Practice tasks
- In embed.html, prepare a document without scripts and a document with a button script.
- Embed a local guide document in an iframe and set title and sandbox.
- Run with a document without scripts and a document with a button script. Results to check: Check the frame’s purpose through its accessible name. Record whether the button runs under the two policies. Record expected and actual results separately.
Variables to observe
| Variable | Baseline | Change | Expected change / hypothesis |
|---|---|---|---|
| sandbox | Empty value | allow-scripts | Pre-run hypothesis: Whether the internal script runs will differ. Keep other conditions fixed and record the actual result separately after running. |
Predictions in this table are not measured results. Change one condition at a time and record why the actual result differs.
Completion criteria
- Check the frame’s purpose through its accessible name.
- Record whether the button runs under the two policies.
Self-check
- What remains if all sandbox tokens are allowed?
- Where do you specify the parent document’s language and the frame’s language?
Official references
Linked example and execution scope
Example source · Runtime environments and limits
External HTTP example: switches between sandbox="" and allow-scripts on the same guide.html and observes button·postMessage behavior.
Source code and records are not overwritten automatically. Resetting an existing example also preserves your notes.
Next learning
Previous: picture and Format Fallbacks · Next: template and Repeated Content