iframe 嵌入 - HTML 教程

讲解

<iframe>（内联框架）在当前页面里嵌入另一个完整的网页：第三方地图、B 站/YouTube 播放器、在线文档、支付页面，都是 iframe 的典型应用场景。它最重要的属性是 src（嵌入页面地址）和 title——title 不显示在页面上，但屏幕阅读器靠它告诉用户「这里嵌入了一个什么内容」，是 iframe 的无障碍刚需，值要描述内容（如「公司位置地图」），而不是「iframe」。

尺寸用 width/height 属性或 CSS 控制；想要响应式视频嵌入（宽度随容器、保持 16:9），现代写法是给 iframe 设 aspect-ratio: 16 / 9 和 width: 100%，不再需要过去的 padding 百分比技巧。loading="lazy" 让屏幕外的 iframe 延迟加载，对嵌入多个视频页的提速明显。

安全是 iframe 章节的另一半。sandbox 属性给嵌入内容套上沙箱：不写值时禁用脚本、表单、弹窗等几乎全部能力，再按需用 allow-scripts、allow-same-origin、allow-forms 逐项放开——嵌入不完全信任的第三方内容时，sandbox 是必选项。反过来，你自己的网站也可以禁止被别人 iframe 嵌套（通过响应头 X-Frame-Options 或 CSP 的 frame-ancestors），防的是「点击劫持」攻击。另外 allow="fullscreen" 控制嵌入视频能否全屏，第三方播放器嵌入码里常见。

示例

<!-- 嵌入地图：title 描述内容，懒加载提速 -->
<iframe
  src="https://www.openstreetmap.org/export/embed.html?bbox=116.3,39.9,116.5,40.0"
  title="公司位置地图"
  width="600"
  height="400"
  loading="lazy"
></iframe>

<!-- 嵌入视频：允许全屏 -->
<iframe
  src="https://player.example.com/embed/abc123"
  title="HTML 入门教学视频"
  width="800"
  height="450"
  allow="fullscreen"
  loading="lazy"
></iframe>

<!-- 沙箱：嵌入不可信内容时逐项放开能力 -->
<iframe src="https://untrusted.example.com/widget" title="第三方小部件" sandbox="allow-scripts" width="300" height="200"></iframe>

响应式尺寸：

.video-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

常见坑

漏写 title：读屏用户只会听到「框架」，完全不知道嵌入了什么。title 是 iframe 的 alt，必须描述内容。
盲目嵌入却不设 sandbox：第三方页面被篡改或本身就是恶意的，没有沙箱它就能在你的页面里执行脚本。不可信来源一律 sandbox。
以为所有站点都能被嵌入：目标站若设了 X-Frame-Options: DENY，iframe 里只会显示拒绝连接的报错。嵌入前先确认对方允许。
首页直接同步加载多个 iframe：每个 iframe 都是一次完整的页面加载，串起来首屏极慢。屏幕外的 iframe 加 loading="lazy"。

小结

iframe 嵌入整页：src 定地址、title 做无障碍、宽高或 aspect-ratio 控尺寸、loading="lazy" 提速；sandbox 限制不可信内容，allow 放行全屏等能力；被嵌入与否由对方响应头决定。下一章厘清块级与行内元素的行为差异。