PHP小码农

Appearance

embed 嵌入插件 ​

<embed> 元素用于嵌入外部内容，如插件、Flash 动画、PDF 文档等。虽然 Flash 已被淘汰，但 <embed> 仍可用于嵌入 PDF、SVG 和其他浏览器可直接渲染的内容。

前置知识

阅读本节前，建议先了解：iframe 安全属性

基础概念 ​

<embed> 是一个自闭合元素，用于在网页中嵌入外部应用或交互式内容。在 Flash 时代，<embed> 是嵌入 SWF 文件的主要方式。如今 Flash 已被淘汰，但 <embed> 仍然有用——主要用于嵌入 PDF 文件和某些类型的交互式内容。

与 <object> 相比，<embed> 更简洁，不支持回退内容，适合用于确定浏览器能处理的内容。

语法 ​

基本语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>embed 嵌入</title>
</head>
<body>
  <h1>embed 标签</h1>

  <!-- 嵌入 PDF -->
  <embed src="document.pdf"
         type="application/pdf"
         width="600" height="400">

  <hr>

  <!-- 嵌入 SVG -->
  <embed src="graphic.svg"
         type="image/svg+xml"
         width="400" height="300">
</body>
</html>

详细说明 ​

embed 属性 ​

属性说明示例
src嵌入内容的 URLsrc="doc.pdf"
type内容的 MIME 类型type="application/pdf"
width显示宽度width="600"
height显示高度height="400"

嵌入 PDF 文件 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>嵌入 PDF</title>
</head>
<body>
  <h1>PDF 文档预览</h1>

  <!-- 方法 1：使用 embed（浏览器内置 PDF 查看器） -->
  <embed src="report.pdf"
         type="application/pdf"
         width="100%" height="600"
         title="年度报告">

  <hr>

  <!-- 方法 2：使用 iframe（更灵活） -->
  <iframe src="report.pdf"
          width="100%" height="600"
          title="年度报告"></iframe>
</body>
</html>

embed vs iframe 嵌入 PDF ​

对比项<embed><iframe>
语法自闭合标签双标签
回退内容不支持支持
沙盒控制不支持支持
浏览器行为直接渲染在框架中加载
语义表示嵌入资源表示嵌套浏览上下文

推荐用法

对于 PDF 嵌入，推荐使用 <iframe> 或 <object>，因为它们支持回退内容和更精细的控制。<embed> 更适合快速嵌入已知浏览器能处理的内容。

Flash 时代回顾 ​

html
<!-- Flash 时代的 embed 用法（已废弃） -->
<!-- <embed src="animation.swf" type="application/x-shockwave-flash" width="400" height="300"> -->

<!-- 现代替代方案 -->
<!-- 动画 → CSS 动画、Canvas、Web Animations API -->
<!-- 视频 → <video> -->
<!-- 游戏 → Canvas + WebGL -->
<!-- 交互式图表 → SVG + JavaScript -->
Flash 用途现代替代方案
动画CSS 动画、Web Animations API、Lottie
视频/音频<video>、<audio>
游戏Canvas、WebGL、WebGPU
富交互HTML5 + JavaScript
文件上传HTML <input type="file">

实战示例 ​

PDF 文档查看器 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PDF 查看器</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      max-width: 900px;
      margin: 0 auto;
      padding: 20px;
    }
    .pdf-viewer {
      border: 1px solid #ddd;
      border-radius: 8px;
      overflow: hidden;
    }
    .pdf-toolbar {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 16px;
      background: #f5f5f5;
      border-bottom: 1px solid #ddd;
    }
    embed {
      width: 100%;
      height: 600px;
      border: none;
    }
  </style>
</head>
<body>
  <h1>PDF 文档查看器</h1>

  <div class="pdf-viewer">
    <div class="pdf-toolbar">
      <span>文档名称：年度报告 2024.pdf</span>
      <a href="report.pdf" download>下载 PDF</a>
    </div>
    <embed src="report.pdf"
           type="application/pdf"
           title="年度报告 2024">
  </div>
</body>
</html>

注意事项 ​

  • <embed> 是空元素，不支持回退内容
  • <embed> 不支持 sandbox 安全属性
  • 并非所有浏览器都支持 PDF 的 <embed> 渲染
  • <embed> 没有标准的无障碍属性
  • 嵌入的内容需要浏览器安装对应的插件或支持对应的 MIME 类型

最佳实践 ​

  • 对于 PDF 文件，优先使用 <iframe> 或 <object> + 回退内容
  • 使用 <embed> 时始终指定 type 属性
  • 为 PDF 等文档提供下载链接作为回退方案
  • 使用 width/height 或 CSS 控制嵌入内容的显示尺寸
  • 避免使用 <embed> 嵌入不可信内容（缺乏安全控制）

下一节

继续学习：object 嵌入对象

参考链接 ​