HTML 的 ＜object＞ 元素

1. 引言

在 HTML 中，嵌入外部资源的方式有很多，比如 <img> 用于图片、<iframe> 用于网页、<video> 用于视频。而 <object> 元素是一个更通用、更灵活的容器，它可以用来嵌入图片、音频、视频、PDF 文档、Flash 动画，甚至是另一个 HTML 页面。

虽然 <object> 在日常开发中不如 <img> 和 <iframe> 常用，但它在某些场景下依然扮演着重要角色。本文将带你全面了解 <object> 元素的语法、属性、实际应用场景，以及它与 <embed>、<iframe> 等元素的区别。

2. 基本语法

<object> 元素是一个双标签元素，基本语法如下：

<object data="资源地址" type="MIME 类型" width="宽度" height="高度">
  备用内容（当资源无法加载时显示）
</object>

其中：

• data：指定要加载的资源 URL，可以是图片、PDF、SVG、HTML 页面等。
• type：指定资源的 MIME 类型，如 image/png、application/pdf、text/html 等。
• width 和 height：设置对象的显示尺寸。
• 标签之间的内容：当浏览器无法加载或不支持该资源时显示的备用内容。

2.1 最简单的示例

<object data="example.pdf" type="application/pdf" width="600" height="400">
  <p>您的浏览器无法显示 PDF 文件，请 <a href="example.pdf">点击下载</a>。</p>
</object>

3. 常用属性详解

<object> 元素支持以下常用属性：

属性	说明
data	资源的 URL，必填
type	资源的 MIME 类型
width	对象宽度（像素或百分比）
height	对象高度（像素或百分比）
name	对象的名称（用于表单提交或脚本引用）
form	关联的表单 ID
usemap	关联的客户端图像映射
classid	类 ID（主要用于旧式 ActiveX 控件）
codebase	类 ID 的基准 URL
archive	相关资源的归档文件列表
standby	加载过程中的提示文字

3.1 通过 <param> 传递参数

<object> 元素还可以配合 <param> 子元素向插件传递初始化参数：

<object data="player.swf" type="application/x-shockwave-flash" width="480" height="320">
  <param name="autoplay" value="true">
  <param name="loop" value="false">
  <p>您的浏览器不支持 Flash。</p>
</object>

4. 实际应用场景

4.1 嵌入 PDF 文档

这是 <object> 最常见的用途之一，可以直接在网页中展示 PDF 文件：

<object data="/files/user-guide.pdf" type="application/pdf" width="100%" height="500">
  <p>无法在线预览，请 <a href="/files/user-guide.pdf">下载 PDF</a>。</p>
</object>

4.2 嵌入 SVG 图片

与 <img> 不同，通过 <object> 嵌入的 SVG 可以被脚本访问和操作：

<object data="icon.svg" type="image/svg+xml" width="64" height="64">
  <img src="icon.png" alt="图标备用图片">
</object>

4.3 嵌入另一个 HTML 页面

<object data="widget.html" type="text/html" width="400" height="300">
  <p>无法加载组件。</p>
</object>

4.4 嵌入视频或音频

<object data="movie.mp4" type="video/mp4" width="640" height="360">
  <p>您的浏览器不支持视频播放。</p>
</object>

5. 与 <embed> 和 <iframe> 的区别

元素	特点	适用场景
<object>	支持 <param> 传参，有备用内容，标准规范	嵌入 PDF、SVG、插件类资源
<embed>	语法更简洁，但无备用内容，非标准（但被广泛支持）	快速嵌入多媒体
<iframe>	嵌入独立 HTML 文档，支持脚本交互，有安全沙箱	嵌入第三方网页、视频播放器

5.1 对比示例

<!-- object -->
<object data="https://pdf-shelf.pages.dev/pdfs/Linux/Linux命令帮助手册.pdf" type="application/pdf" width="800" height="600">
  备用内容
</object>

<!-- embed -->
<embed src="video.mp4" type="video/mp4" width="640" height="360">

<!-- iframe -->
<iframe src="https://www.example.com/video" width="640" height="360"></iframe>

6. 浏览器兼容性与注意事项

6.1 兼容性

• 所有现代浏览器均支持 <object> 元素。
• 但不同浏览器对 type 的处理方式略有差异，建议始终提供备用内容。
• Flash 已退出历史舞台，classid 等旧属性在现代开发中已无实际意义。

6.2 注意事项

1. 始终提供备用内容：当资源加载失败或类型不支持时，用户能看到提示。
2. 注意安全：嵌入外部 HTML 时，确保来源可信，避免 XSS 风险。
3. 性能考量：加载大型 PDF 或视频会消耗较多资源，建议按需加载。
4. 响应式设计 ：使用 CSS 或 width="100%" 让对象自适应屏幕。

7. 总结

<object> 元素是一个功能强大的通用嵌入容器，虽然在某些场景下被 <img>、<video>、<iframe> 等更专门的元素取代，但在嵌入 PDF、SVG 以及需要向插件传递参数的场景中，它依然是不可替代的选择。

掌握 <object> 的语法、属性和适用场景，能让你在面对复杂的嵌入需求时多一个得力的工具。