HTML 内嵌框架

<iframe> 用于在当前页面中嵌入另一个独立的 HTML 文档。

基本语法

html 
<iframe src="https://example.com" width="600" height="400"></iframe>

常用属性

属性说明
src嵌入页面的 URL
width / height框架尺寸
title框架的描述（无障碍必需）
allowfullscreen允许全屏（用于视频嵌入）
loading="lazy"延迟加载，等用户滚动到附近才加载
sandbox安全沙箱，限制权限

<iframe> 必须有 title 属性，否则屏幕阅读器用户不知道该区域的内容是什么。

常见场景

嵌入 YouTube 视频

html 
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="YouTube 视频播放器"
  allowfullscreen
></iframe>

嵌入地图

html 
<iframe
  src="https://www.google.com/maps/embed?pb=..."
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen=""
  loading="lazy"
  title="公司位置地图"
></iframe>

嵌入 CodePen / 代码演示

html 
<iframe
  height="300"
  style="width:100%;"
  src="https://codepen.io/..."
  title="代码演示"
></iframe>

安全与 sandbox

iframe 可以加载任何网页，这可能带来安全风险。sandbox 属性限制 iframe 内页面的行为：

html 
<iframe src="untrusted-content.html" sandbox></iframe>
<!-- 空的 sandbox 施加所有限制 -->

<iframe src="widget.html" sandbox="allow-scripts allow-same-origin">
</iframe>
<!-- 只放开脚本和执行同源请求 -->
值允许的行为
（空）几乎禁止一切
allow-scripts运行 JavaScript
allow-same-origin视为同源
allow-forms提交表单
allow-popups弹出窗口

srcdoc — 内联 HTML

不通过 URL 加载，直接在属性中写 HTML 内容：

html 
<iframe srcdoc="<h1>Hello</h1><p>内联 HTML 内容</p>" width="300" height="200">
</iframe>

过多 iframe 会严重影响页面性能——每个 iframe 都是独立的渲染上下文。使用 loading="lazy" 可以缓解。对于性能要求高的场景，尽量用原生的 HTML/CSS/JS 实现，而不是嵌入多个 iframe。