object标签的备用内容仅在浏览器完全无法加载或识别资源时显示，需确保MIME类型正确、fallback为合法HTML且不依赖外部资源；Chrome与Firefox对404处理不一致，建议用fetch预检或包裹容器配合JavaScript检测。
object标签加载失败时如何显示备用内容
直接写在 <object> 标签内部的内容，就是它的 fallback（备用）内容，但只有当浏览器**完全无法加载或识别该资源**时才会显示——不是所有“加载慢”或“404”都触发它。
常见误解是把提示文字随便塞进去就万事大吉，结果发现资源 404 了却啥也没显示。这是因为：<object> 对某些 MIME 类型（比如 text/html）会尝试渲染空白页面，而不是降级到 fallback。
- 确保备用内容是合法 HTML 片段，且不依赖外部资源（比如别在里面再嵌一个
<img src="fallback.png">，否则 fallback 自己也可能挂） - 如果目标是嵌入 PDF，用
type="application/pdf"，并在内部放一段纯文本或<p>PDF 加载失败，请下载查看</p> - Chrome 和 Firefox 对
<object>的 fallback 触发逻辑不一致：Firefox 在 HTTP 404 时更倾向显示 fallback，Chrome 可能只显示空白框，此时需配合 JavaScript 检测
用 onerror 捕获 object 加载失败（不推荐但有时必须）
<object> 元素本身不支持 onerror 事件，这是个常被踩的坑。试图写 <object onerror="..."> 完全无效。
可行方案是包裹一层容器，用定时器或 load 事件间接判断：
立即学习“前端免费学习笔记（深入）”；
<div id="pdf-container">
<object data="report.pdf" type="application/pdf" width="100%" height="600">
PDF 加载失败，请检查网络或下载文件。
</object>
</div>
<script>
const obj = document.querySelector('object');
obj.addEventListener('load', () => {
// 注意：load 事件在部分失败场景下仍会触发（如空 PDF）
if (obj.contentDocument && obj.contentDocument.body.innerHTML.trim() === '') {
obj.parentElement.innerHTML = 'PDF 内容为空或加载异常。';
}
});
</script>
更稳妥的做法是先用 fetch 预检资源是否存在：
- 发起 HEAD 请求检查
dataURL 是否返回 200 - 若失败，直接插入 fallback HTML，跳过
<object>渲染 - 避免在移动端因预加载策略导致重复请求
替代方案：embed vs iframe 的 fallback 行为差异
如果你只是想嵌入 PDF 或 Flash（已淘汰），<embed> 和 <iframe> 的 fallback 更可控，但语义和兼容性不同：
-
<embed src="x.pdf">不支持任何 fallback 内容，失败时通常显示浏览器默认占位符（如“找不到插件”） -
<iframe src="x.pdf">Fallback text</iframe>—— 这里的文本**永远不会显示**，<iframe>的 fallback 只在老式浏览器中生效，现代浏览器忽略 - 真正可靠的 fallback 组合是：
<iframe>+ 外层<div>+ JavaScript 检测iframe.contentWindow.location.href是否为"about:blank"或报错
容易被忽略的 MIME 类型与服务器配置
即使 HTML 写对了，<object> 仍可能静默失败，根源常在服务端：
- PDF 文件被服务器返回
text/plain或application/octet-stream，会导致 Firefox 拒绝渲染，但 fallback 不触发 - 确认响应头包含正确
Content-Type：PDF 应为application/pdf，SVG 应为image/svg+xml - 本地开发时用
file://协议加载资源，多数浏览器会因 CORS 或 MIME 限制直接屏蔽<object>，务必走 HTTP 服务测试
实际部署前，用浏览器开发者工具的 Network 面板看资源响应状态码和 Content-Type，比反复改 HTML 更快定位问题。
