object标签的备用内容为线性机制，首个成功加载渲染的直接子元素生效，嵌套object无效；典型三层结构为embed→iframe→img/p，现代场景应由js主导多级降级。
object 标签的备用内容层级机制
object 标签本身不支持“多级”备用（如嵌套 fallback 链），它的备用逻辑是线性的：浏览器按 DOM 顺序尝试子节点，**第一个能成功加载并渲染的子元素即生效**，后续全部跳过。所谓“多级”，实际是靠在 object 内部按优先级从高到低排列多种 fallback 类型（embed、iframe、img、纯文本等），依赖浏览器对各标签的支持程度和加载行为差异来实现降级。
正确嵌套 fallback 的常见组合
典型可靠结构是三层：首选插件对象 → 次选嵌入式容器 → 最终纯 HTML 回退。注意子元素必须是 object 的直接子节点，且顺序不能颠倒：
<object data="chart.swf" type="application/x-shockwave-flash" width="400" height="300"> <!-- 第一后备：现代浏览器可能支持 embed（但已废弃，仅作兼容） --> @@@###@@@ <!-- 第二后备：iframe 加载静态替代页（如 PNG 或 HTML 渲染页） --> <iframe src="chart-fallback.html" width="100%" height="300" frameborder="0"></iframe> <!-- 最终后备：纯文本或 img（无 JS/CSS 依赖） --> @@##@@ <p>图表无法加载，请检查 Flash 插件或启用 JavaScript。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </object>
-
embed在部分旧版 Chrome/Firefox 中仍可触发 Flash，但现代浏览器已完全屏蔽；它仅作为object子节点时才参与 fallback 流程 -
iframe不会被所有浏览器视为有效 fallback —— Safari 和较新 Edge 对object内的iframe渲染支持不稳定，需实测 - 最终的
img和p总是可见（只要object完全失败），但若前面某节点被加载（哪怕空白），后续内容将被忽略
为什么 object 嵌套另一个 object 不构成多级 fallback
嵌套 object 是无效的 fallback 设计：<object><object>...</object></object> 中内层 object 不会作为外层的备选项，而是被当作普通子内容——如果外层加载成功，内层根本不会解析；如果外层失败，浏览器只看外层的直接子节点（即那个内层 object 元素本身），而不会递归执行它的 fallback 逻辑。
- 浏览器不会递归解析嵌套
object的子节点，内层object的data属性不会被触发 - 即使外层失败，内层
object也仅作为 DOM 节点存在，其自身 fallback 链（如它的子img）不会激活 - 真正需要多层降级时，应平铺子节点，而非嵌套
现代场景下更可靠的替代方案
Flash 已淘汰，PDF/Canvas/Video 等资源的 fallback 应转向 JS 控制 + 语义化标记。纯 HTML fallback 链越来越难覆盖所有情况：
- 对 PDF：用
object+iframe+link（下载链接）比嵌套更稳，但 iOS Safari 对object[data="*.pdf"]渲染不可靠，建议加onerror监听后切换iframe - 对自定义 Web Component 或 Canvas 图表：直接用 JS 动态插入，通过
document.createElement('canvas')+fallbackImage.src = '...'手动控制降级路径 -
object的type属性检测极弱——浏览器只校验 MIME 类型是否匹配，不验证插件是否存在，因此不能依赖它做精准能力判断
真正复杂的多级 fallback 必须由 JS 主导：先尝试加载主资源，失败后依次尝试备选 URL，最后回退到静态内容。HTML 的 object 只适合简单、静态、已知环境的降级场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
