标签不提供加载进度事件或属性，仅支持load事件作为唯一可靠的完成信号；如需进度条，必须用fetch监听readablestream并计算百分比，再通过blob url赋值给object.data。
object 标签本身不提供加载进度事件或属性
<object></object> 是 HTML 中用于嵌入外部资源（如 PDF、SVG、HTML 片段）的语义化容器，但它**没有内置的 progress 事件、onprogress 回调，也不暴露 loaded/total 字节信息**。浏览器不会向它派发下载进度事件，也无法通过 objectEl.readyState 或 objectEl.buffered 获取百分比——这些是 <video></video> 或 <audio></audio> 的能力，不是 <object></object> 的。
唯一可靠的加载完成信号是 load 事件
<object></object> 只保证在**嵌入资源完全加载并初始化成功后**触发 load 事件（注意：失败时通常静默，不触发 error）。这意味着：
- 你无法知道“已加载 30%”，只能知道“还没好”或“好了”
-
objectEl.addEventListener('load', ...)是唯一可依赖的完成钩子 - 如果
data指向的是跨域 PDF 或图片，且服务端未设置Access-Control-Allow-Origin，load可能永不触发，也无错误回调 - 对
data="../popup_error.html"这类同域 HTML，load触发时机 ≈ 该 HTML 文档解析完成（类似 iframe 的load），但不含其内部脚本/图片的加载状态
想实现进度条？必须绕开 object，改用 fetch + Blob + URL.createObjectURL
若你真正需要的是“显示 HTML 片段加载的百分比”，<object></object> 不是正确工具。应主动发起请求并监听 ReadableStream：
- 用
fetch(url)获取响应，检查response.headers.get('content-length')是否存在 - 调用
response.body.getReader()，循环reader.read()，累加value.length - 每次累加后计算
Math.round((receivedLength / contentLength) * 100)并更新进度条 - 读取完成后，用
new Blob([uint8Array], {type: 'text/html'})创建 blob URL - 最后赋值给
objectEl.data = url—— 此时object立即加载，但已是本地 blob，无网络进度
关键点：进度感知发生在 fetch 阶段，不是 <object></object> 阶段。你看到的“进度”，其实是 HTML 文件本身的下载进度，和 <object></object> 渲染无关。
容易忽略的兼容性与安全细节
实际部署时这几个点常被跳过，导致进度卡住或报错：
- 服务端必须返回
Content-Lengthheader，否则contentLength为null，无法算百分比 -
response.body在 Safari 15.4+ 和旧版 Firefox 中可能不可用，需降级为XMLHttpRequest+onprogress - 动态创建的 blob URL 必须在不再需要时调用
URL.revokeObjectURL(url)，否则内存泄漏 - 若目标 HTML 含相对路径资源（如
<img src="logo.png">），加载到<object></object>后会以当前页面 URL 为 base 解析，可能 404 —— 需提前重写 HTML 中的路径或改用<iframe></iframe>sandbox 控制
归根结底：<object></object> 是个黑盒容器，进度条需求本质是「网络请求可观测性」问题，得从 fetch/XHR 层解决，而不是指望标签自己吐出数字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
