嵌入对象标签 object 与 embed

<object> 和 <embed> 用于嵌入外部资源，如 PDF、Flash、Java Applet 等插件内容。

object 标签

基本语法

<object data="resource.pdf" type="application/pdf" width="800" height="600">
  <param name="view" value="FitH">
  <param name="toolbar" value="1">
  <!-- 回退内容 -->
  <p>无法显示PDF，请<a href="resource.pdf">下载查看</a></p>
</object>

核心属性

param 子元素

<object data="video.swf" type="application/x-shockwave-flash">
  <param name="movie" value="video.swf">
  <param name="quality" value="high">
  <param name="autoplay" value="true">
</object>

embed 标签

基本语法

<embed
  src="resource.pdf"
  type="application/pdf"
  width="800"
  height="600"
>

核心属性

两者区别

常见用例

嵌入PDF

<object data="document.pdf" type="application/pdf" width="100%" height="600px">
  <p>您的浏览器不支持PDF预览，请<a href="document.pdf">下载文件</a></p>
</object>

<!-- 或使用 iframe（推荐） -->
<iframe src="document.pdf" width="100%" height="600px"></iframe>

嵌入SVG

<object data="diagram.svg" type="image/svg+xml" width="400" height="300">
  <img src="diagram.png" alt="图表">
</object>

嵌入网页（旧方式）

<object data="https://example.com" type="text/html" width="800" height="600">
  <p>无法加载内容</p>
</object>

<!-- 推荐：使用 iframe -->
<iframe src="https://example.com" width="800" height="600"></iframe>

现代替代方案

替代对照表

PDF 嵌入现代方案

<!-- 方案1：iframe（简单） -->
<iframe src="document.pdf" width="100%" height="600px"></iframe>

<!-- 方案2：Google Docs Viewer -->
<iframe
  src="https://docs.google.com/viewer?url=https://example.com/doc.pdf&embedded=true"
  width="100%"
  height="600px"
></iframe>

<!-- 方案3：PDF.js（可控性强） -->
<div id="pdf-container"></div>
<script src="pdf.js"></script>

注意：Flash 已于 2020 年底停止支持，应使用 HTML5 原生标签替代。

安全注意事项

<!-- 避免嵌入不可信来源 -->
<object data="untrusted-source.com/content">  <!-- 危险 -->
</object>

<!-- 使用 sandbox 限制权限 -->
<iframe sandbox="allow-scripts" src="content.html"></iframe>

要点总结

• object 支持回退内容，embed 不支持
• 现代 Web 应优先使用 iframe、video、canvas 等标准标签
• Flash 已废弃，使用 HTML5 原生能力替代
• 嵌入外部资源需注意安全风险
• PDF 嵌入推荐使用 iframe 或 PDF.js