data属性是资源加载的唯一触发条件,其值为空、非法或解析失败时浏览器不发起请求,也不显示fallback;仅当data指向有效URL且请求返回404或Content-Type不被支持时,fallback才生效。

data 属性是加载资源的唯一触发条件
不填 data,或填了但值非法,浏览器根本不会发起任何请求——连失败都算不上,更不会显示 fallback 内容。
-
data=""、data=" "、data="javascript:void(0)":全部静默忽略,DOM 中该<object>节点处于“未激活”状态 -
data="report.pdf?name=张三":中文未 URL 编码(应为name=%E5%BC%A0%E4%B8%89),部分浏览器直接截断或返回 400,且不触发 fallback -
data="file://local/doc.pdf":现代浏览器默认阻止,控制台无错误,也不渲染 - 相对路径如
data="assets/chart.svg"必须确保相对于当前 HTML 文档 URL 解析正确;漏掉./或写成../wrong/就 404
type 属性只起辅助匹配作用,不决定是否加载
type 不影响请求发起,只参与 MIME 类型协商——真正起效的是服务端响应头里的 Content-Type。
- 即使
type="application/pdf"写对了,但服务器返回Content-Type: text/plain,Chrome 仍会下载文件,而非内嵌渲染 -
type值错误(比如把image/svg+xml写成image/svg)通常不影响加载,只要响应头正确,照样能显示 SVG - 某些旧浏览器(如 IE)会用
type判断是否调用 ActiveX 插件,但现代浏览器已弃用插件机制,仅依赖响应头 - 空
type或缺失type不报错,但可能降低 fallback 触发概率(例如 PDF 返回application/octet-stream时,有type更易匹配内置处理器)
fallback 内容只在「加载成功但无法处理」时生效
很多人误以为 fallback 是“data 失败时的备用方案”,其实它根本等不到那个阶段。
-
data为空或非法 → 浏览器不 fetch → fallback 不显示 -
data指向 404 资源 → 请求发出并收到 404 响应 → fallback 显示(前提是响应头没被 CORS 阻断) -
data正确但服务端返回Content-Type: application/x-msdownload→ 浏览器识别为不可渲染类型 → fallback 显示 - 用户禁用了 PDF 查看器 → 即使 PDF 加载成功、响应头正确,也会退回到 fallback
data 支持的三种形式及其实际表现差异
不是所有合法 URL 都能在所有场景下正常工作,必须结合部署环境和目标浏览器判断。
- 相对路径(
data="doc.pdf"):最常用,但需注意构建工具是否重写路径、HTTP Server 是否配置了正确的静态路由 - 绝对 URL(
data="https://cdn.example.com/file.pdf"):必须确保服务端设置了Access-Control-Allow-Origin,否则跨域请求成功但渲染被拦截 -
data:URI(data:application/pdf;base64,...):绕过网络,但 Base64 编码体积膨胀 ~33%,超 1MB 容易卡 UI;Safari 对 PDF 的data:支持不稳定,建议优先用 Chrome/Firefox 测试
真正容易被忽略的是:data 值一旦解析失败(比如含未编码空格、控制字符),整个加载流程就终止于 DOM 构建阶段——你甚至看不到 network tab 里有请求,也收不到任何 console warning。

















