嵌入内容与 iframe

约 616 字大约 2 分钟

布欧-Lewyon

2026-05-16

HTML 提供了多种方式在页面中嵌入外部内容：其他网页、PDF、地图等。

`<iframe>` 内联框架

<iframe> 在当前页面中嵌入另一个 HTML 页面：

<iframe src="https://example.com" width="800" height="600">
  您的浏览器不支持 iframe。
</iframe>

常用属性

属性	作用
`src`	嵌入页面的 URL
`width` / `height`	框架尺寸
`sandbox`	安全限制（见下文）
`allow`	功能权限（如麦克风、摄像头）
`loading`	懒加载：`lazy` / `eager`
`name`	框架名称（可用于 `<a target="name">`）
`referrerpolicy`	来源策略

<!-- 懒加载 iframe（推荐） -->
<iframe src="https://maps.google.com/..." loading="lazy" width="100%" height="400"></iframe>

<!-- 允许全屏 -->
<iframe src="https://player.vimeo.com/video/123" allowfullscreen></iframe>

`sandbox` 安全属性

sandbox 对嵌入内容施加安全限制：

<!-- 启用所有限制（最安全） -->
<iframe src="https://unknown-site.com" sandbox></iframe>

<!-- 选择性解除限制 -->
<iframe
  src="https://trusted-site.com"
  sandbox="allow-scripts allow-same-origin allow-forms"
></iframe>

sandbox 可选值：

值	作用
（空）	启用所有限制
`allow-scripts`	允许执行脚本
`allow-same-origin`	允许与父页面同源处理
`allow-forms`	允许提交表单
`allow-popups`	允许弹窗
`allow-modals`	允许 `alert()` 等模态框
`allow-top-navigation`	允许导航父页面
`allow-presentation`	允许进入演示模式

`allow` 功能权限

<!-- 允许使用麦克风和摄像头（如视频会议嵌入） -->
<iframe
  src="https://meeting.example.com"
  allow="microphone; camera; geolocation"
></iframe>

iframe 的常见用途

<!-- 嵌入 YouTube 视频 -->
<iframe
  width="560" height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="YouTube 视频"
  allowfullscreen
></iframe>

<!-- 嵌入 Google 地图 -->
<iframe
  width="600" height="450"
  src="https://www.google.com/maps/embed?pb=..."
  allowfullscreen
  loading="lazy"
></iframe>

<!-- 嵌入 PDF 预览 -->
<iframe src="document.pdf" width="100%" height="600"></iframe>

`<object>` 与 `<embed>`

这两个标签用于嵌入非 HTML 内容（插件、PDF 等）。

`<object>`

<object data="document.pdf" type="application/pdf" width="800" height="600">
  <p>无法预览 PDF。请 <a href="document.pdf">下载文件</a>。</p>
</object>

`<embed>`

<embed src="flash-game.swf" type="application/x-shockwave-flash" width="400" height="300">

<embed> 是 HTML5 中新引入的，而 <object> 从 HTML4 就存在。两者功能重叠，现代开发优先使用 <iframe> 或对应平台的原生嵌入方式。

小结

标签	用途	安全注意
`<iframe>`	嵌入外部 HTML 页面	⚠️ `sandbox` 限制不可信来源
`<object>`	嵌入 PDF / 插件	渐进增强（备选链接）
`<embed>`	嵌入插件/媒体	已逐渐被替代

安全原则：嵌入不可信来源的内容时，始终设置 sandbox 属性。