PHP小码农

Appearance

object 嵌入对象 ​

<object> 元素用于在网页中嵌入外部资源，如 PDF、SVG、Flash 等多媒体内容。与 <embed> 不同，<object> 支持回退内容，并通过 <param> 子元素传递参数。本节将介绍 <object> 的用法和与 <embed> 的区别。

前置知识

阅读本节前，建议先了解：embed 嵌入插件

基础概念 ​

<object> 是一个功能强大的嵌入元素，它可以嵌入各种类型的外部资源，包括图片、PDF、SVG、HTML 文档、Flash 等。<object> 最大的优势是支持回退内容——当浏览器无法渲染嵌入内容时，会显示 <object> 内部的替代内容。

此外，<param> 子元素可以为嵌入的插件传递配置参数。

语法 ​

基本语法 ​

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

  <!-- 嵌入 PDF，带回退内容 -->
  <object data="document.pdf"
          type="application/pdf"
          width="600" height="400">
    <p>您的浏览器不支持 PDF 预览。
       <a href="document.pdf">点击下载 PDF 文件</a>。</p>
  </object>

  <hr>

  <!-- 嵌入图片（可作为 img 的替代） -->
  <object data="photo.jpg"
          type="image/jpeg"
          width="400" height="300">
    <img src="fallback.jpg" alt="回退图片">
  </object>
</body>
</html>

详细说明 ​

object 属性详解 ​

属性说明示例
data嵌入资源的 URLdata="doc.pdf"
type资源的 MIME 类型type="application/pdf"
width显示宽度width="600"
height显示高度height="400"
name对象名称name="myObject"
form关联的表单form="myForm"
usemap图像映射usemap="#map"

param 子元素 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>param 子元素</title>
</head>
<body>
  <h1>param 子元素</h1>

  <!-- object + param 为嵌入内容传递参数 -->
  <object data="viewer.swf" type="application/x-shockwave-flash"
          width="400" height="300">
    <param name="quality" value="high">
    <param name="bgcolor" value="#ffffff">
    <param name="allowScriptAccess" value="sameDomain">
    <p>需要 Flash Player 插件。</p>
  </object>

  <!-- 注意：Flash 已被淘汰，此处仅作历史参考 -->
</body>
</html>

param 的历史地位

<param> 主要用于 Flash 和 Java Applet 时代，为插件传递配置参数。随着 Flash 的淘汰和 Java Applet 的弃用，<param> 在现代 Web 开发中使用极少。

object 嵌入 PDF ​

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

  <!-- 推荐方式：object + 回退 -->
  <object data="annual-report.pdf"
          type="application/pdf"
          width="100%" height="600"
          title="年度报告">
    <!-- 回退：提供下载链接 -->
    <div style="padding: 40px; text-align: center;">
      <h2>无法预览 PDF</h2>
      <p>您的浏览器不支持内嵌 PDF 预览。</p>
      <p><a href="annual-report.pdf" download>点击下载 PDF 文件</a></p>
    </div>
  </object>
</body>
</html>

object 嵌入 SVG ​

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

  <!-- object 嵌入外部 SVG 文件 -->
  <object data="chart.svg"
          type="image/svg+xml"
          width="500" height="400"
          title="销售数据图表">
    <!-- 回退图片 -->
    <img src="chart.png" alt="销售数据图表">
  </object>
</body>
</html>

object vs embed vs iframe ​

对比项<object><embed><iframe>
回退内容支持不支持支持
子元素<param>无任意
安全属性无无sandbox/allow
典型用途PDF、SVGPDF、插件网页、视频
语义嵌入对象嵌入插件嵌入浏览上下文

实战示例 ​

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;
    }
    .doc-viewer {
      border: 1px solid #ddd;
      border-radius: 8px;
      overflow: hidden;
    }
    .doc-header {
      padding: 12px 16px;
      background: #f8f9fa;
      border-bottom: 1px solid #ddd;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .fallback {
      padding: 60px 20px;
      text-align: center;
    }
    .fallback a {
      display: inline-block;
      padding: 12px 24px;
      background: #4285f4;
      color: white;
      text-decoration: none;
      border-radius: 8px;
      margin-top: 16px;
    }
  </style>
</head>
<body>
  <h1>技术文档查看器</h1>

  <div class="doc-viewer">
    <div class="doc-header">
      <span>HTML5 教程.pdf</span>
      <a href="tutorial.pdf" download>下载文件</a>
    </div>

    <object data="tutorial.pdf"
            type="application/pdf"
            width="100%" height="600"
            title="HTML5 教程 PDF">
      <!-- 回退内容 -->
      <div class="fallback">
        <h2>无法预览 PDF</h2>
        <p>请安装 PDF 阅读器或直接下载文件。</p>
        <a href="tutorial.pdf" download>下载 PDF 文件</a>
      </div>
    </object>
  </div>
</body>
</html>

注意事项 ​

  • <object> 的 data 属性类似于 <img> 的 src
  • 回退内容放在 <object> 标签内部
  • <object> 不支持 sandbox 和 allow 安全属性
  • 嵌入页面内的内容（如 HTML）建议使用 <iframe> 而非 <object>
  • <param> 子元素在现代 Web 开发中使用极少

最佳实践 ​

  • 优先使用 <object>（而非 <embed>）嵌入 PDF 和 SVG
  • 始终在 <object> 内提供有意义的回退内容和下载链接
  • 指定正确的 type MIME 类型
  • 对于网页内容，使用 <iframe> 而非 <object>
  • 设置 width/height 或使用 CSS 控制显示尺寸

下一节

继续学习：异步解码

参考链接 ​