data为空或非法时浏览器不发起请求且不显示fallback；data指向404或mime不匹配才触发fallback；动态切换data需销毁重建object节点。
data属性为空或非法时浏览器根本不发起请求
这是最隐蔽的失败场景：只要data值为空字符串、空白符、javascript:void(0)或协议被浏览器拦截（如file://），整个object>就处于“未激活”状态。它不会触发任何网络请求，也不显示fallback内容，页面上只留一片空白——连控制台都无错误提示。
排查要点：
- 用
console.log(el.getAttribute('data'))确认值是否真的存在且非空 - 检查路径是否含未编码的中文或特殊字符（如
report.pdf?name=张三必须为report.pdf?name=%E5%BC%A0%E4%B8%89） - 本地开发时禁用
file://协议，改用npx http-server起服务再测
data指向404或MIME不匹配才触发fallback
fallback不是“备用文案”，而是严格意义上的降级开关：仅当HTTP请求成功返回（如404、500）但响应头Content-Type与type不兼容时才会渲染。例如type="application/pdf"但服务器返回text/plain，Chrome会直接下载而非内嵌，同时显示fallback。
关键限制：
-
fallback必须是合法HTML元素（如<p>PDF加载失败</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a> <p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>），注释或纯文本无效 - 跨域资源若未配
Access-Control-Allow-Origin，请求可能被CORS拦截，此时fallback也不显示 - 写
typemustmatch属性可强制校验MIME类型，避免HTML内容被误当PDF渲染
动态切换资源必须销毁并重建object节点
修改已挂载
正确做法是彻底替换节点：
- 用
document.createElement('object')新建节点，完整设置data、type、width、height - 若原
- 为防闪屏，先设
newObj.style.display = 'none'，监听load事件后再显示
PDF嵌入失败的三大硬性条件
目前
- 服务端响应头必须为
Content-Type: application/pdf（application/octet-stream或text/plain会导致下载或fallback） -
type属性必须精确写成"application/pdf"（"pdf"或"text/pdf"均失效） - 路径必须可访问且同源；跨域PDF需服务端配置CORS，否则即使URL正确也白屏
最容易被忽略的是：PDF查看器被用户手动禁用后，即使所有条件都满足，也会直接退回到fallback——这个行为无法通过JS检测或干预。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
