object 的 data 属性必须非空且可解析，否则浏览器不发起请求；常见错误包括空值、未编码中文、路径错误、跨域未配 cors 或 content-type 不匹配；type 属性影响 fallback 触发，动态切换需重建节点而非修改属性。
data 属性必须非空且可解析，否则浏览器不发起任何请求
设置 object 的数据源，核心就是填对 data 属性——但它不是“写了就加载”，而是有严格触发条件。只要 data 值为空字符串、纯空白、javascript:void(0) 或非法 URL（如 file:// 协议），浏览器会直接跳过请求，连网络面板都看不到痕迹，更不会显示 fallback 内容。
常见错误包括：
-
data=""或data=" "：静默失效，DOM 中该object处于“未激活”状态 -
data="report.pdf?name=张三"：中文未 URL 编码，部分浏览器截断参数或返回 400，且不触发 fallback -
data="../docs/chart.svg"：路径错一层，404，但若服务端没配好路由，可能返回 200 + 错误 HTML，导致渲染异常
相对路径 vs 绝对 URL：同源是硬门槛，跨域需服务端配合
用相对路径（如 data="assets/manual.pdf"）最稳妥，但必须确保它相对于当前 HTML 文档的 URL 正确解析；用绝对 URL（如 data="https://cdn.example.com/file.pdf"）则必须满足两个条件：服务端响应头含 Access-Control-Allow-Origin，且浏览器未因策略拦截渲染（比如 Safari 对 Content-Type 不匹配时直接拒载）。
跨域 PDF 常见失败现象：
- 控制台报
Blocked loading resource from cross-origin URL：CORS 拦截，请求根本没发出去 - 请求成功返回 200，但页面空白：服务端没返回
Content-Type: application/pdf，Safari/旧 Edge 拒绝内嵌 - Chrome 显示“无法加载”，但下载链接正常：用户在
chrome://settings/content/pdfDocuments中禁用了 PDF 查看器
type 属性不是可选配置，而是 fallback 触发的关键开关
type 不决定是否加载，但极大影响 fallback 是否生效。例如 data="doc.pdf" 加载成功，但服务器返回 Content-Type: application/octet-stream，此时若没写 type="application/pdf"，Chrome 可能直接下载而非退到 fallback；而写了，就更大概率触发内部处理器匹配逻辑，让 <p>下载PDF</p> 显示出来。
不同资源类型推荐写法：
- Pdf：
type="application/pdf" - SVG：
type="image/svg+xml"（注意不是image/svg） - HTML 片段：
type="text/html"（仅同源有效，且不能取其中某段 DOM，只是整页渲染） - Flash（已淘汰）：
type="application/x-shockwave-flash"，需配套<param>
动态切换 data 源？别改属性，要换节点
JavaScript 修改 objectEl.setAttribute('data', newUrl) 完全无效——现代浏览器只在元素首次插入 DOM 时读取一次 data。想换内容，必须销毁旧节点、新建一个：
- 创建新
object：const newObj = document.createElement('object') - 完整设置属性：
newObj.data = newUrl、newObj.type = 'application/pdf'、newObj.width = '800'、newObj.height = '600' - 手动复制原
<param>子节点（如有）：newObj.appendChild(oldParam.cloneNode(true)) - 执行替换：
oldObj.parentNode.replaceChild(newObj, oldObj)
这个过程容易被忽略的是：不重建节点，就永远卡在第一次加载的状态；哪怕你清空了 data 再填新值，浏览器也无动于衷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
