备用内容必须写在<object>开闭标签之间且为合法HTML元素,仅当data资源404、超时、CORS阻止、type不匹配、插件禁用或用户拦截时才渲染。

必须把备用内容写在 <object> 开始和结束标签之间,且不能是空格或注释;否则浏览器不会触发降级渲染。
备用内容什么时候会被显示
浏览器只在以下任一条件成立时才渲染 <object> 内部的内容:
-
data指向的资源返回 404、网络超时或被 CORS 阻止 -
type声明的 MIME 类型(如"text/html")与实际响应头不一致 - 浏览器不支持该类型(例如禁用 PDF 插件,或未安装 Flash)
- 用户手动阻止加载(如弹出拦截、插件禁用)
正确写法:结构必须完整,不能省略结束标签
错误示例(仅含注释或空格):<object data="page.html" type="text/html"><!-- fallback --></object> —— 这不会显示任何备用内容。
正确结构应包含可渲染的 HTML 元素:
立即学习“前端免费学习笔记(深入)”;
<object data="sidebar.html" type="text/html" width="300" height="200"> <p>无法加载侧边栏,请<a href="sidebar.html">点击此处手动打开</a>。</p> <img src="fallback-sidebar.png" alt="侧边栏静态图"> </object>
注意:<img>、<a>、<p> 都是有效备用内容;但 <script> 或 <style> 不会执行或生效。
常见坑:本地开发时 file:// 协议下 object 加载 HTML 失败
Chrome 和 Edge 在 file:// 协议下默认禁止 <object data="xxx.html"> 加载 HTML,即使文件存在也会直接走备用内容。这不是 bug,而是安全限制。
- 解决方案:用本地服务器启动(如
python3 -m http.server或 VS Code Live Server) - 不要依赖
type="text/html"触发降级——它在某些浏览器中不生效,真正起作用的是加载失败本身 - Safari 对
object加载 HTML 的支持较弱,建议用<iframe>替代,或加 JS 检测后回退
最关键的一点:备用内容不是“可选装饰”,而是降级链的最后一环;只要 data 资源不可达,它就必须能独立传达信息或提供替代操作路径。



















