object标签仅适合嵌入pdf、svg、同源html等浏览器原生支持的资源，不能嵌视频/音频（应使用video/audio）、跨域html（不支持sandbox等安全控制）、flash/java插件（已失效），动态修改data属性无效，fallback仅在加载失败时触发。
object 标签能嵌什么，不能嵌什么
它不是万能容器，只适合嵌入外部可执行资源或浏览器原生支持的插件型内容。现代浏览器基本只认 type="image/*"、type="application/pdf"、type="text/html" 这几类；Flash、Java applet 等已彻底失效，强行写 type="application/x-shockwave-flash" 会静默失败。
常见误用是拿它当 iframe 替代品加载网页——虽然语法上可行，但不支持 sandbox、referrerpolicy 等关键安全控制，且无法可靠监听加载状态。
- 推荐场景：PDF 预览、SVG 内联复用、本地 HTML 片段嵌入（同源）、旧系统遗留插件（极少数内网环境）
- 明确避坑：不要用于跨域 HTML 嵌入、视频/音频播放（该用
video/audio）、JavaScript 动态内容注入
src 和 data 属性到底该用哪个
data 是 object 的标准属性，必须指定；src 是历史遗留别名，部分浏览器兼容，但 W3C 规范已不鼓励。用 src 可能导致 Safari 或旧版 Edge 加载失败。
注意路径解析规则：值为相对路径时，以当前 HTML 文档 URL 为基准，不是以包含它的 JS 文件或 CSS 文件位置为准。
- 正确写法：
<object data="report.pdf" type="application/pdf"></object> - 错误写法：
<object src="report.pdf"></object>（缺少type，且用src） - 动态设置时，必须改
data属性：obj.data = "chart.svg"，改src无效
fallback 内容怎么写才真正生效
只有当 data 资源加载失败（404、MIME 不匹配、跨域被拒）、或浏览器完全不支持该 type 时，内部 HTML 才显示。很多人把提示文字写在标签里却没看到，是因为资源其实加载成功了（比如 PDF 被浏览器用内置 PDF 查看器打开了）。
测试 fallback 是否起作用，最可靠方式是故意设一个不存在的 data 值 + 错误 type，例如：data="x" type="application/x-bogus"。
- 有效 fallback 示例：
<object data="map.html" type="text/html">请启用 JavaScript 并允许跨域请求</object> - 无效做法：在
object里放img或iframe作为兜底——它们不会自动渲染，只是静态 HTML 文本 - 想实现“PDF 失败则显示图片”，得用 JS 监听
error事件后手动替换 DOM
如何检测 object 是否加载成功
没有统一可靠的 onload 事件。Chrome 和 Firefox 对 PDF 支持 load，但 Safari 完全不触发；error 事件也只在资源获取阶段失败时触发，不涵盖渲染失败（如 PDF 损坏）。
实际能依赖的只有两件事：一是检查 object 元素是否被插入文档流，二是监听其 error 事件做失败兜底。其他都得靠业务层妥协。
- 基础检测：
obj.addEventListener('error', () => console.log('resource failed')) - 避免轮询
offsetWidth或clientHeight—— PDF 渲染后尺寸可能为 0，SVG 则可能立即有尺寸 - 复杂场景（如需等 PDF 渲染完再截图），建议换用
iframe+ postMessage，或服务端转图
真正麻烦的是：你永远不知道用户浏览器到底用内置 PDF 查看器、下载文件、还是弹出“无法打开”提示——object 对这些行为零控制力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
