必须匹配服务端content-type与html标签type值，否则chrome/firefox会白屏；本地file://协议下firefox可能误判为二进制下载，应使用http-server预览；typemustmatch属性可强制校验mime类型防止html误渲染。
PDF 嵌入必须匹配 Content-Type 和 type 值
直接写 <object data="report.pdf" type="application/pdf"></object> 很可能白屏，不是代码错，而是服务端响应头不匹配。Chrome/Firefox 会严格比对 HTTP 响应头中的 Content-Type 和标签里的 type 属性，只要不一致（比如返回 text/plain 或 application/octet-stream），就跳过渲染、触发 fallback。
本地开发时用 file:// 协议，Firefox 可能忽略 type、只认文件后缀，导致 PDF 被当二进制下载；务必用 npx http-server 启一个本地 HTTP 服务预览。
加 typemustmatch 属性可强制校验 MIME 类型，避免服务端返回 HTML 却被误当 PDF 渲染（常见于 404 页面被当成 PDF 返回）：
<object data="manual.pdf" type="application/pdf" typemustmatch> <p>PDF 加载失败，请检查网络或使用支持 PDF 的浏览器</p> </object>
SVG 嵌入后 DOM 隔离与交互限制
<object></object> 加载 SVG 是唯一真正“嵌入文档”的方式，但它的 DOM 是隔离的——主页面 JS 无法直接访问 SVG 内部元素，contentDocument 仅在同源时可用，且 PDF 场景下该属性为 null。
常见踩坑点：
- 设
width/height会覆盖 SVG 自身的viewBox缩放逻辑，响应式建议用width="100%"+ 父容器有明确宽度 - SVG 内含
<use href="icon.svg#x"></use>这类跨文件引用时，若icon.svg不同源，请求会被 CORS 拦截，此时 fallback 到<img src="icon.png">更实际 - 内部 JS 事件（如
<g onclick="alert(1)"></g>）不会自动绑定到主页面上下文，需通过contentDocument手动桥接，且仅限同源
HTML 页面嵌入在 Chrome/Edge v120+ 已基本失效
把 <iframe src="help.html"></iframe> 换成 <object data="help.html" type="text/html"></object>，在 Chrome/Edge v120+ 中大概率白屏或直接显示 fallback。这不是配置问题，是浏览器主动禁用：跨域 HTML 加载被默认拦截，且没有 sandbox、referrerpolicy 等 iframe 支持的关键能力。
仅两种场景可能成功：
- 同源静态 HTML 文件（如
data="./about.html"），且目标页不设X-Frame-Options: DENY或Content-Security-Policy: frame-ancestors 'none' - fallback 内容必须是合法 HTML 元素，
<p>加载失败</p>可行，纯文本或注释不行
注意：<object></object> 没有 onerror 事件，出错时只靠内部内容降级，别指望 JS 捕获加载失败。
别用 object 加载 PNG/JPG/GIF —— img 才是正解
<object data="chart.png"></object> 不会显示图片，Chrome/Firefox 通常报 Failed to load resource 或留白。<object></object> 本就不为位图设计，它依赖资源具备可嵌入的文档结构（如 SVG、PDF），而 PNG/JPG 是二进制流，浏览器无解析入口。
正确做法只有两个：
- 位图一律用
<img>，这是语义、兼容性、性能全维度最优解 - 需要格式降级（如 WebP → JPG），用
<picture></picture>+<source></source>：
<picture><source srcset="chart.webp" type="image/webp"> @@##@@ </source></picture>
所谓“object fallback 到 img”只是幻觉——<object></object> 中的 <img src="chart.jpg" alt="数据图表"> 只在 data 加载失败时才显示，而 PNG 路径失败时多数浏览器根本不会触发 fallback，直接静默白屏。这点在 iOS Safari 上尤其不稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
