data 属性必须非空且为合法 URL，否则浏览器不发起请求也不渲染 fallback；其值仅在元素首次插入 DOM 时读取一次，动态修改无效，需重建节点。
data 属性必须非空且可解析，否则浏览器不发起任何请求
很多开发者以为只要写了 <object> 标签，哪怕 data 是空字符串或空格，浏览器也会尝试加载或至少显示 fallback —— 实际上完全不会。一旦 data 值为空、仅含空白字符（如 data="" 或 data=" "），或为非法 URL（如 data="file://..."、data="javascript:..."），浏览器直接跳过资源加载逻辑，既不发请求，也不渲染内部 fallback 内容。
常见错误现象包括：<object data=""><p>备用文本</p></object> 页面上什么也不显示；控制台无报错，网络面板里也看不到请求。
-
data必须是合法 URL：支持相对路径（data="report.pdf"）、绝对路径（data="/assets/chart.svg"）、完整 URL（data="https://cdn.example.com/doc.pdf"） - 中文参数必须 URL 编码，例如
data="report.pdf?name=%E5%BC%A0%E4%B8%89"，否则部分浏览器截断请求或返回 400 - 跨域资源需服务端配置
Access-Control-Allow-Origin，否则控制台报Blocked loading resource from cross-origin URL
PDF 嵌入时 data + type 组合必须同时正确，缺一不可
单纯写 data="doc.pdf" 不足以让 PDF 渲染出来。现代浏览器（Chrome/Firefox/Safari）依赖两个条件共同生效：一是 data 指向可访问的 PDF 文件，二是服务器响应头中包含 Content-Type: application/pdf；而 type="application/pdf" 的作用是辅助浏览器提前识别意图，提高 fallback 触发概率。
如果只设 data 但没写 type，某些场景下（如服务端返回 Content-Type: application/octet-stream）浏览器可能直接下载而非内嵌；如果 type 写错（比如写成 type="pdf/application"），不影响加载，但会降低内置 PDF 查看器匹配成功率。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 最小可用写法：
<object data="doc.pdf" type="application/pdf" width="800" height="600"><a href="doc.pdf">下载 PDF</a></object> - 务必设置
width和height，否则多数浏览器默认尺寸极小（如 300×150），PDF 可能只显示左上角一小块 - fallback 内容（如下载链接）只在「请求成功但无法渲染」时生效，不是 404 或 CORS 失败的兜底方案
动态切换 data 值必须重建 object 元素，不能仅修改属性
用 JavaScript 执行 el.setAttribute('data', 'new.pdf') 或 el.data = 'new.pdf' 完全无效。浏览器只在 <object> 首次插入 DOM 时读取一次 data，后续所有属性变更都不会触发重载、重请求或重渲染。
这是最常被忽略的兼容性陷阱——尤其在实现 PDF 切换、SVG 动态图表等场景时，开发者反复改 data 却始终显示旧内容，还以为是缓存问题。
- 正确做法是创建全新
object节点：const newObj = document.createElement('object'); - 手动复制必要属性：
newObj.data = 'new.pdf'; newObj.type = 'application/pdf'; newObj.width = '800'; newObj.height = '600'; - 若原元素含
<param>子节点（如 Flash 场景），需逐个cloneNode(true)并追加 - 替换时建议先隐藏新节点（
newObj.style.display = 'none'），监听load事件后再显示，避免闪屏
不同资源类型对 data 的实际支持差异极大
<object data="..."> 看似通用，但底层机制因资源类型而异：SVG 和 PDF 依赖浏览器内置渲染器；Flash/Java Applet 依赖已淘汰的插件架构；而视频、音频等多媒体资源基本不走 object —— 应优先用 <video> 或 <audio> 标签。
例如，试图用 data="movie.mp4" 加 type="video/mp4" 嵌入视频，多数现代浏览器会静默失败（不报错、不 fallback、不播放），因为它们不把 MP4 当作 object 支持的可处理类型。
- 推荐组合：
data="chart.svg"+type="image/svg+xml"（稳定支持） - 谨慎组合：
data="doc.pdf"+type="application/pdf"（依赖浏览器 PDF 查看器开关状态） - 避免组合：
data="song.mp3"、data="video.webm"—— 这些应交给语义化媒体标签 - Flash 已全面停用，
data="xxx.swf"在 Chrome 88+、Edge 90+ 中默认阻断，无降级路径
真正决定 data 是否生效的，从来不是 HTML 写法多漂亮，而是服务端响应头是否匹配、浏览器是否还保留对应处理器、以及你有没有意识到：它只读一次。
