object 标签在 HTML5 中用于嵌入外部资源（如图片、视频、PDF、Flash、Java Applet 等），其核心价值之一是提供**内置的备用内容机制**——当浏览器无法加载或不支持指定资源时，会自动显示标签内部的后备内容。
备用内容的触发条件
以下任一情况发生时，object 内部的子内容（文本、图片、嵌套的 img、embed 甚至另一个 object）会被渲染：
指定的 data 资源 URL 不存在或返回 404/网络错误 浏览器不支持该资源的 MIME 类型（例如未安装 PDF 插件，或禁用了 Flash） type 属性声明的类型与实际资源不匹配，导致解析失败 资源加载超时或被用户主动阻止（如弹出拦截、插件禁用）
正确书写备用内容的结构
备用内容必须写在 object 开始与结束标签之间，且不能仅依赖注释或空格。推荐结构如下：
<object data="chart.swf" type="application/x-shockwave-flash" width="400" height="300"> <p>您的浏览器不支持 Flash。</p> <img src="chart-fallback.png" alt="柱状图：2023年销售数据"> <a href="chart.pdf">下载 PDF 版图表</a></object>
注意：不能省略结束标签；嵌套的 img 或 a 是有效内容，会被当作后备方案呈现。
立即学习“前端免费学习笔记（深入）”；
与 embed 和 iframe 的关键区别
object 是 HTML5 唯一原生支持多层降级的嵌入元素：
embed 没有语义化后备机制，失败时通常只留空白或报错 iframe 的 fallback 需依赖 JS 检测或 CSS（如 iframe:not(:loaded) 不被广泛支持），无原生 HTML 降级能力 object 的后备逻辑由浏览器直接实现，无需脚本，兼容所有支持 HTML5 的环境
实用建议
提升备用体验的关键细节：
始终设置 type 属性，帮助浏览器提前判断是否支持（即使 data 是 .pdf，也应写 type="application/pdf"） 避免在 object 内使用 script 作为后备——多数浏览器会忽略其中的 JS 执行 如需更精细控制（如加载状态提示），可结合 onerror 事件 + JS，但不要依赖它替代 HTML 备用内容 对现代项目，优先用原生 video、audio、img 标签；object 主要用于遗留插件或特殊 MIME 类型（如 SVG 内联、某些 CAD 查看器）
评论(0)