Iframes

Mission

The Riverlight Community Hall wants to place a public transit map inside its visitor page. Embed the map in a frame that names what it contains and limits permissions the map does not need.

What you'll build

A titled, sized iframe for the hall’s transit-map embed, with restricted permissions and lazy loading.

Target

Your preview reserves space for the map iframe. The remote page may not load in the course preview; check the markup even if the frame stays blank.

One idea: an iframe is another page with its own boundary

<iframe> displays another HTML page inside yours. The embedded page remains a separate document, so it needs a clear title for screen readers and careful permissions.

<iframe
    src="https://example.com"
    width="800"
    height="450"
    title="Example Domain information page"
    sandbox="allow-scripts"
    loading="lazy"
></iframe>

src points to the page. width and height reserve space before it loads. sandbox starts restrictive; add only the tokens the embed requires. loading="lazy" waits until the frame is near the viewport.

Checkpoint

The example above uses a documentation site, not a transit map; its frame may be blank because that site does not permit embedding. For the hall page, use a map provider’s embed URL, not the normal map page URL. Preview the reserved space and inspect the iframe attributes; playback of remote content is not required to pass the checks.

Permission choices

Do not add permissions by habit. Cross-origin frames cannot freely read each other's DOM, and a frame with unnecessary permissions increases risk.

Payoff

The visitor page now has a clearly described, constrained space for outside content.