优先选 , 是遗留方案,缺乏可访问性支持、fallback 机制和语义化控制; 需指定 data 和 type,内部文本为 fallback,现代浏览器对其兼容性和稳定性更优。

怎么判断该用 <embed></embed> 还是 <object></object>
优先选 <object></object>,<embed></embed> 是遗留方案,没有标准 fallback 机制,也不支持 aria 属性或语义化嵌入控制。浏览器对 <object></object> 的可访问性支持更完整,且能通过 type 和 data 显式声明资源类型。
<object></object> 的必需属性和 fallback 写法
必须提供 data(目标资源 URL)和 type(MIME 类型),否则部分浏览器(如 Firefox)会忽略加载;内部文本内容即 fallback,会在加载失败或不支持时显示:
<object data="video.mp4" type="video/mp4"> <p>您的浏览器不支持播放此视频,请<a href="video.mp4">下载</a>。</p> </object>
-
type错误(如写成video/mpeg4)会导致 Chrome/Firefox 拒绝加载 - 省略
type时,浏览器靠文件扩展名或响应头推断,不可靠 - 不要在
<object></object>外再套<iframe></iframe>或<div> 做容器——它本身已具备尺寸与交互能力 <h3> <code><embed></embed>只在什么场景下还能用仅限快速原型、内网工具页、或需兼容极老环境(如 IE8–)且明确放弃可访问性与错误处理的场合。它不支持子元素,无法定义 fallback,所有参数都靠属性传:
立即学习“前端免费学习笔记(深入)”;
@@@###@@@
-
<embed src="flash.swf" type="application/x-shockwave-flash" width="400" height="300"></embed>没有规范定义的错误状态,加载失败时页面就留白,无提示 - 现代浏览器对
type属性基本忽略,只认src和文件后缀 - 若用 JavaScript 动态插入
<embed></embed>,Safari 可能不触发加载,而<object></object>更稳定
PDF、SVG、音频等常见资源的实际写法差异
PDF 推荐用
<object></object>并显式声明application/pdf;SVG 可以内联,但外链 SVG 必须用<object></object>才能支持脚本和 CSS;<audio></audio>/<video></video>标签已原生支持,无需套<object></object>或<embed></embed>。- PDF:
<object data="doc.pdf" type="application/pdf"><p>请使用 PDF 阅读器打开</p></object> - SVG:
<object data="icon.svg" type="image/svg+xml"><img src="icon-fallback.png" alt="图标"></object> - 避免把 MP3 丢进
<embed></embed>:用<audio controls src="track.mp3"></audio>更可靠
真正容易被忽略的是 MIME 类型拼写和服务器响应头是否匹配——哪怕 HTML 写对了
type,如果服务器返回Content-Type: text/plain,Chrome 仍可能拒绝渲染<object></object>。 -











