后备内容仅在http请求失败、mime类型不匹配、插件缺失或data路径错误导致资源未请求时显示；必须为合法html元素，支持嵌套object实现多级降级，pdf场景需加typemustmatch强制校验。
后备内容只在明确失败时才显示，不是“兜底万能层”
很多人以为把文字、图片甚至另一个 <object></object> 塞进标签里就能“稳稳 fallback”，结果弱网下白屏、404 时没反应、type 写错却照常加载——这是因为后备内容的触发条件非常具体：<object></object> 内部内容**仅在以下任一情况发生时才渲染**：HTTP 请求失败（404/500/断网）、响应 MIME 类型与 type 不匹配、插件缺失（如 PDF 阅读器被禁用）、data 路径拼错导致资源根本未发起请求（注意：这不触发 fallback，而是静默失败）。
常见错误包括：data="./pdfs/https://www.php.cn/link/c3be52b54804f58495806bd08faba616" 实际文件在 /static/files/，浏览器发错请求但不报错也不 fallback；或只写 <object data="x.svg">备用文本</object>，却忘了 type 属性，导致 Chrome 直接忽略校验逻辑。
必须写合法 HTML 元素，注释和空格无效
<object></object> 的后备内容不是“任意内容”，它必须是浏览器能解析并渲染的合法 HTML 元素。以下写法可行：
<p>PDF 加载失败，请点击下载</p><img src="chart-fallback.png" alt="销售趋势图">@#@#@#@#@#@#@#@#@#@0- 嵌套另一个
<object></object>（如 SVG → PNG → 文字表格）
以下写法**完全无效**：
-
<!-- 备用提示 -->（纯注释不渲染） - 仅空格或换行（
<object> </object>） -
<script>alert('fallback')</script>（多数浏览器忽略执行）
多级降级要靠嵌套 object，不能只靠一层 fallback
想实现“SVG → PNG → 纯文本”三级容错？单靠一个 <object></object> 内部写三行文字没用。正确做法是嵌套：
<object data="chart.svg" type="image/svg+xml" width="400" height="300">
<object data="chart.png" type="image/png">
<p>图表不可用，2023年销售额：¥1,280万</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</object>
</object>
关键点：
- 每层
<object></object>都需独立的data和type，且都必须闭合（缺一不可） - 外层失败才进内层，内层再失败才显示最内层文本
- 不要指望 JS 控制顺序——这是浏览器原生行为，无需脚本
PDF 场景下 typemustmatch 是防错关键
PDF 是目前 <object></object> 唯一稳定可用的场景，但极易因服务端配置翻车。加 typemustmatch 属性可强制校验：
<object data="https://www.php.cn/link/c3be52b54804f58495806bd08faba616" type="application/pdf" typemustmatch style="width:100%; height:600px;"> <p>PDF 加载失败，<a href="https://www.php.cn/link/c3be52b54804f58495806bd08faba616">点击下载</a></p> </object>
它会检查服务端返回的 Content-Type 响应头是否严格等于 application/pdf。若后端返回 text/html（比如 404 页面），哪怕 data 指向的是 .pdf 后缀，也会立刻 fallback——而不是白屏或弹下载框。
容易被忽略的细节：
- 本地开发用
file://协议时，Firefox 可能跳过type校验，建议始终用http://localhost启服务验证 -
type必须写全称："application/pdf"，不能是"pdf"或"text/pdf" -
width和height必须设（或用style内联），否则渲染区域为 0×0
真正难的不是写对标签，而是让 data 路径、type、服务端 Content-Type、网络状态四者同时在线——少一个，fallback 就不会启动，用户看到的只会是一片空白。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
