备用内容必须写在开闭标签之间且为合法html元素，仅当data资源404、超时、cors阻止、type不匹配、插件禁用或用户拦截时才渲染。
必须把备用内容写在 <object></object> 开始和结束标签之间，且不能是空格或注释；否则浏览器不会触发降级渲染。
备用内容什么时候会被显示
浏览器只在以下任一条件成立时才渲染 <object></object> 内部的内容：
-
data指向的资源返回 404、网络超时或被 CORS 阻止 -
type声明的 MIME 类型（如"text/html"）与实际响应头不一致 - 浏览器不支持该类型（例如禁用 PDF 插件，或未安装 Flash）
- 用户手动阻止加载（如弹出拦截、插件禁用）
正确写法：结构必须完整，不能省略结束标签
错误示例（仅含注释或空格）：<object data="page.html" type="text/html"><!-- fallback --></object> —— 这不会显示任何备用内容。
正确结构应包含可渲染的 HTML 元素：
<object data="sidebar.html" type="text/html" width="300" height="200"> <p>无法加载侧边栏，请<a href="sidebar.html">点击此处手动打开</a>。</p> @@##@@ </object>
注意：<img src="fallback-sidebar.png" alt="侧边栏静态图">、<a></a>、<p></p> 都是有效备用内容；但 <script></script> 或 <style></style> 不会执行或生效。
常见坑：本地开发时 file:// 协议下 object 加载 HTML 失败
Chrome 和 Edge 在 file:// 协议下默认禁止 <object data="xxx.html"></object> 加载 HTML，即使文件存在也会直接走备用内容。这不是 bug，而是安全限制。
- 解决方案：用本地服务器启动（如
python3 -m http.server或 VS Code Live Server） - 不要依赖
type="text/html"触发降级——它在某些浏览器中不生效，真正起作用的是加载失败本身 - Safari 对
object加载 HTML 的支持较弱，建议用<iframe></iframe>替代，或加 JS 检测后回退
最关键的一点：备用内容不是“可选装饰”，而是降级链的最后一环；只要 data 资源不可达，它就必须能独立传达信息或提供替代操作路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
