现代浏览器已不推荐用 object 标签展示 pdf，因其加载不可控、事件不可靠、移动端 fallback 失效、跨浏览器行为分裂；应优先使用 iframe 或 pdf.js。
iframe 更稳；如果必须用 object（比如遗留系统限制或合规要求），得清楚知道它在哪会失效、怎么绕过最明显的坑。
为什么 onload 事件永远“提前触发”
object 的 load 事件只表示 DOM 节点插入完成，并不等待 PDF 渲染就绪。你绑了 onload，控制台刚打印完，页面还是一片白，滚动卡住，页码没出来——这很正常。
原因在于：PDF 渲染由浏览器内置 PDF 查看器（如 Chrome PDF Viewer）异步接管，object 元素本身不暴露任何加载进度或完成状态。所有主流浏览器都不支持 contentDocument 访问 PDF 内容，Safari 直接抛 SecurityError，Chrome/Firefox 返回 null。
- 别写
document.querySelector('object').addEventListener('load', ...)来等“PDF 加载完”——它根本不是你想要的那个“完” - 无法通过 JS 获取页数、缩略图、文本是否可选中等真实就绪信号
- 想跳转到第 5 页？加
#page=5到data值里，但 iOS Safari 和多数安卓 WebView 会忽略该参数
移动端 fallback 几乎形同虚设
很多人写 <object data="doc.pdf" type="application/pdf"><p>请下载</p></object> 是为了兜底，但现实是：iOS Safari、微信内置浏览器、QQ 浏览器基本不显示里面的 <p></p>。它们要么静默调起系统 PDF 应用，要么白屏，连控制台错误都不报。
根本原因是：现代移动端浏览器对 type="application/pdf" 的处理逻辑已转向“交由系统处理”，不再走 HTML fallback 流程。删掉 type 属性也无济于事，object 在移动端大概率降级为下载链接。
-
<noembed></noembed>已被所有现代浏览器忽略，别再用 - 真要 fallback，只能靠 JS 检测
object高度是否长期为 0，或监听error（但该事件在 PDF 加载失败时也常不触发） - 中文或空格导致 URL 失效（如
report.pdf?name=张三）时，object不渲染 fallback，也不报错，页面直接空白
data 属性的 URL 必须正确编码
data 值若含中文、空格、&、= 等字符，会导致请求发不出，浏览器报 net::ERR_INVALID_URL，且不会触发 fallback。
- 动态生成的 PDF URL（如带 token 的后端接口）务必用
encodeURIComponent()编码完整 query string，不只是文件名 - 错误写法：
data="report.pdf?token=abc&user=张三"→ 必须改为data="report.pdf?token=abc&user=%E5%BC%A0%E4%B8%89" - 纯
100%宽高在 Flex/Grid 容器中可能失效；推荐用带单位的值，如width="800px"或width="100vw"
真正能落地的替代方案
如果你的目标是“让用户看到 PDF”，而不是“必须用 object 标签”，那么优先级应该是：
- 首选
iframe：写法简单、加载稳定、支持loading="lazy"、手势缩放默认开启；缺点是无法用 JS 读取页数或搜索文本 - 次选
pdf.js：Mozilla 官方维护，完全可控，支持高亮、搜索、页码跳转、权限控制；需部署 viewer.html，URL 必须是完整可访问路径（如file=https://yoursite.com/doc.pdf） - 轻量 JS 封装如
PDFObject：本质还是生成object，仅做浏览器检测和基础 fallback 包装，不解决底层不可靠问题
复杂点不在怎么写标签，而在验证——同一段代码，在 Mac Safari 显示正常，Windows Edge 白屏，iOS 微信直接跳转下载，这种分裂是常态。别把时间花在 patch object 的各种 edge case 上，直接换路径更省力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
