object标签仅在PDF嵌入、SVG交互图表、强fallback控制的遗留HTML片段三场景可用；其他用途易致白屏或静默下载，且需严格校验data/type/响应头一致性、上下文隔离、CSP限制及浏览器兼容性。
object 标签现在只在三个场景下真正可用：PDF 嵌入、SVG 交互图表、需强 fallback 控制的遗留 HTML 片段。其他用途基本失效，硬写只会白屏或静默下载。
PDF 嵌入必须满足 data/type/响应头三者严格一致
不是写了 <object data="doc.pdf" type="application/pdf"> 就能显示——失败几乎全是服务端或路径配置问题：
-
data必须指向可访问的 PDF 文件（如"./docs/report.pdf"），且服务器返回 HTTP 200 状态码 -
type必须是"application/pdf"；写成"pdf"、"text/pdf"或留空，浏览器直接跳 fallback - 服务端响应头必须包含
Content-Type: application/pdf；否则 Chrome/Firefox 会下载或留白 - 加
typemustmatch属性可强制校验，避免“返回 HTML 却当 PDF 解析”的错位渲染 - 本地开发用
file://协议时，Firefox 可能忽略type、只按后缀判断；务必用http://localhost启服务预览
SVG 内按钮点击失效的真正原因不是 onclick 写错了
常见现象是 SVG 里的 <button onclick="doIt()"> 点不动——问题不在语法，而在执行上下文被隔离：
- 父页 JS 定义的
doIt()函数，SVG 子文档无法访问；必须把逻辑写进 SVG 文件内部的<script>块里 - 若 SVG 引用了外部 JS（如
<script href="util.js">），<object>不继承父页 base URL，大概率 404 - CSP 策略会拦截 SVG 内联脚本，即使同域；
Content-Security-Policy: script-src 'self'默认禁止内联<script> - 想让父页响应按钮动作？不能直接调用，得用
postMessage发消息，父页监听message事件接收
嵌入 HTML 片段时 object 和 iframe 的关键区别
两者都能加载外部 HTML，但语义和行为差异直接影响调试成本：
立即学习“前端免费学习笔记（深入）”；
-
<iframe src="sidebar.html">是独立浏览上下文，CSS/JS 完全隔离，支持loading="lazy"，无需type属性 -
<object data="sidebar.html" type="text/html">要求显式声明type，且 fallback 内容（标签内 HTML）会在加载失败时原样渲染 - 现代浏览器对
file://下的<object data="xxx.html">有额外限制，可能降级为下载；上线前必须走 HTTP 服务 - 若需主页面样式穿透到嵌入内容，
<object>不行，必须用 JS 动态fetch+innerHTML注入
最容易被忽略的兼容性陷阱
不是功能写不出来，而是边界条件没验证就上线：
- 旧版 Safari 对
<object>渲染 SVG 有重绘延迟，hover 动画卡顿；IE11 不支持contentDocument，得用getSVGDocument()兼容 - 移动端 WebView（尤其 Android 低版本）可能静默屏蔽 SVG 内联脚本，不报错也不执行
- 不要依赖
svgEl.contentDocument.querySelector("button")立即操作——必须等svgEl.addEventListener("load", () => { ... })触发后再取 - SVG 内部的 CSS 不会从父页继承，hover 变色、transition 等必须写在 SVG 文件的
<style>块里
真正麻烦的从来不是怎么写标签，而是确认 JS 在哪一层上下文里运行、消息能不能通、样式有没有被隔离——这些边界问题不提前验证，上线后只剩白屏和 silent fail。
