object标签fallback仅在明确加载失败（如404、cors拒绝、file://拦截、content-type与type不匹配）时触发，非“未显示即降级”；pdf/svg嵌入需严格匹配type与响应头，否则可能白屏且不触发fallback。
object 标签的 fallback 不是“没显示就出来”，而是只在明确加载失败时触发——比如 404、CORS 拒绝、file:// 协议下被拦截、或响应头 Content-Type 与 type 属性不匹配。日常用它做 PDF/SVG/本地 HTML 的嵌入，比 iframe 更可控；但想拿它当通用 iframe 替代品，大概率白屏还查不出错。
PDF 嵌入时 fallback 为什么有时不显示
常见错误现象：PDF 文件路径正确，但页面空白，内部 <p></p> 文字完全不出现。
- 原因往往是服务器返回的 PDF 响应头里
Content-Type是application/octet-stream或空，而你写了type="application/pdf"—— 浏览器校验失败，直接放弃渲染，但也不触发 fallback（这是 spec 行为，不是 bug） - 解决方法：确保服务端返回正确的
Content-Type: application/pdf；若无法控制服务端，可省略type属性，让浏览器自行 sniff，fallback 就会更可靠 - 别依赖
onerror：object元素不冒泡error事件，监听无效；唯一可靠的降级手段就是写好内部内容
SVG 内联渲染时 type 属性必须写对
场景：想让 SVG 参与父级 CSS 样式（比如 fill: currentColor），又不想内联整个 SVG 源码。
- 正确写法：
<object data="icon.svg" type="image/svg+xml"><img src="icon-fallback.png" alt="icon"></object> - 如果漏掉
type="image/svg+xml"，Chrome/Firefox 会当成普通二进制资源加载，SVG 不渲染，fallback 也不触发（同 PDF 问题） - Safari 对
object加载 SVG 支持较弱，建议加 JS 检测：if (!('plugins' in navigator)) { /* 切到 img 回退 */ }
嵌入本地 HTML 页面时跨域限制最隐蔽
错误现象：<object data="./help.html" type="text/html">...</object> 在本地双击打开（file:// 协议）时白屏，控制台无报错。
- 根本原因：
file://协议下，Chrome/Edge 禁用object加载 HTML（安全策略），且不抛任何错误，fallback 也不会显示 - 开发阶段必须起本地服务（如
npx serve），用http://localhost才能正常加载 - 即使同源，若目标 HTML 含
<script></script>，object中的脚本默认执行——没有sandbox隔离，这点和iframe关键不同
真正容易被忽略的是：你写的 fallback 内容是否真能被用户看到。很多情况下它被 CSS 隐藏了（比如父容器 overflow: hidden），或者被绝对定位元素盖住，又或者字体颜色和背景一致——这些不会报错，但会让 fallback 形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
