标签采用浏览器内核主动触发的条件异步加载，非懒加载也非同步阻塞；其 data 请求受 mime 类型支持、缓存状态和插件可用性三重限制，fallback 在渲染判定失败时立即生效而非等待加载完成，且无标准 onload/onerror 事件，需通过尺寸轮询、预检请求或鸿蒙 webview 替代方案综合判断加载状态。
<object></object> 标签的资源加载行为不是“按需懒加载”，也不是“同步阻塞渲染”，而是一套由浏览器内核（如 WebKit、Blink）在解析 HTML 时主动触发、带条件判断的异步加载流程。它和 <img>、<iframe></iframe> 的加载时机与失败处理逻辑完全不同，直接照搬其他标签的经验容易出错。
为什么 <object></object> 的 data 属性不总是触发请求
浏览器对 <object data="xxx"></object> 的处理分三步：先检查 MIME 类型是否被当前环境支持；再判断是否已缓存且未过期；最后才发起网络请求。如果 data 指向一个 PDF 文件，但设备没装 PDF 插件（或鸿蒙 ArkWeb 禁用了插件机制），WebKit 就会跳过加载，连 Network 面板里都看不到请求。
常见误判点：
- 以为加了
type="application/pdf"就一定能加载——实际取决于系统是否注册了对应 handler，鸿蒙 ArkWeb 默认不支持外部插件，只走内置渲染器 - 本地开发时能打开，上线后白屏——很可能是 CDN 或反向代理把 PDF 响应头的
Content-Type改成了text/plain，导致浏览器拒绝加载 - 使用相对路径如
data="./doc.pdf"，但在 Vue/React 单页应用中，路由为/user/profile时，实际请求地址变成/user/doc.pdf，404
<object></object> 的 fallback 内容何时生效
fallback 不是“加载失败后才显示”，而是“只要浏览器判定无法原生渲染该资源，就立即渲染内部内容”。这个判定发生在 DOM 构建阶段，早于网络请求完成。所以你常看到的现象是：<object></object> 占位区域一闪而过，立刻变成 fallback 文本或 <embed></embed> 标签。
关键细节：
- 即使
dataURL 可访问、返回 200，只要 MIME 类型不匹配（比如服务器返回application/octet-stream），fallback 也会激活 - 在 Edge 浏览器中，若 PDF 资源启用了 HTTP/2 Server Push，但 push stream 被私有网络策略拦截（
blockInsecurePrivateNetworkRequests），fallback 会静默启用，Network 面板无请求记录 - 不要在 fallback 里嵌套另一个
<object></object>——WebKit 不支持递归解析，第二层会被忽略
如何可靠监听 <object></object> 加载状态
它不支持 onload / onerror 事件（HTML 规范明确不保证），也不能靠 document.getElementById("obj").contentDocument 判断——因为 PDF、SVG、Flash（已淘汰）等类型压根不生成 contentDocument。
可行方案只有两个：
- 用
IntersectionObserver+ 定时轮询offsetWidth和offsetHeight是否非零（适用于 PDF 渲染后尺寸可测的场景） - 对
dataURL 发起预检请求（fetch(dataUrl, { method: "HEAD" })），在成功后再插入<object></object>，并配合setTimeout等待 300ms 后检查是否渲染出内容 - 鸿蒙 ArkWeb 下更推荐用
webview替代<object></object>加载 PDF，因为 ArkWeb 提供onPageStarted和onPageFinished回调，可控性高得多
真正难处理的不是“怎么让它加载”，而是“怎么确认它到底加载成了没有”。很多团队卡在 PDF 预览白屏问题上，最后发现根本不是资源路径或权限问题，而是没意识到 <object></object> 的加载状态根本没有标准可观测接口——你得绕开规范，用尺寸、定时、网络预检组合判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
