跳到主要内容

IFrame

iframe = embed another webpage

What is an IFrame?​

"Inline frame for embedding"

An iframe (inline frame) embeds another HTML document within the current page.

"An iframe is an HTML element that embeds another HTML document within the current page, creating a nested browsing context."

Basic Syntax​

<iframe src="https://example.com"></iframe>

"IFrames use the src attribute to specify the URL of the document to embed."

Common Attributes​

width · height · title · sandbox

<iframe
  src="https://example.com"
  width="800"
  height="600"
  title="Embedded Content"
  sandbox="allow-scripts"
>
</iframe>

"IFrames support width, height, title, and sandbox attributes for sizing, accessibility, and security."

Security: Sandbox​

Restrict iframe capabilities

<iframe src="untrusted.html" sandbox="allow-scripts allow-same-origin">
</iframe>

Sandbox restrictions:

  • No scripts (unless allow-scripts)
  • No forms (unless allow-forms)
  • No popups (unless allow-popups)
  • No same-origin (unless allow-same-origin)

"The sandbox attribute restricts iframe capabilities for security, preventing scripts, forms, and popups unless explicitly allowed."

Same-Origin Policy​

Cross-origin restrictions

  • Same-origin: Full access
  • Cross-origin: Limited access (CORS applies)
  • Can't access parent window from cross-origin iframe

"Same-origin policy restricts iframe access - cross-origin iframes have limited access to parent window."

Common Use Cases​

Videos · Maps · Widgets

  • Embed videos: YouTube, Vimeo
  • Embed maps: Google Maps
  • Third-party widgets: Social media, ads
  • Document embedding: PDFs, other pages

"IFrames are commonly used to embed videos, maps, third-party widgets, and documents."

Responsive IFrames​

CSS for responsive sizing

.iframe-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

"Responsive iframes use CSS with aspect ratio padding to maintain proportions across screen sizes."

Accessibility​

Title attribute required

<iframe src="content.html" title="Embedded video player"> </iframe>

Always provide a title for screen readers.

"IFrames should have a title attribute for accessibility, describing the embedded content."

9️⃣ Alternatives to IFrames​

Consider alternatives when possible

  • Embed API: For videos (YouTube, Vimeo)
  • Web Components: For reusable widgets
  • Server-side includes: For same-domain content
  • AJAX: For dynamic content loading

"Consider alternatives like embed APIs, web components, or AJAX when iframes aren't necessary."

Best Practices​

✅ Use sandbox for untrusted content ✅ Provide title attribute ✅ Make responsive ✅ Consider security implications ✅ Use allow attribute for permissions ❌ Don't use for same-origin content (use includes) ❌ Don't forget accessibility

"IFrames embed another HTML document within a page. They support width, height, title, and sandbox attributes. Sandbox restricts capabilities for security. Same-origin policy applies - cross-origin iframes have limited access. Common uses include embedding videos, maps, and widgets. Always provide title for accessibility and use sandbox for untrusted content."

🧠 Ultra-Short Cheat Sheet​

Embed another document
src attribute
Sandbox (security)
Same-origin policy
Responsive CSS
Title for accessibility
Common: videos, maps, widgets