object 标签嵌入 PDF 时必须同时设置正确的 data 和 type 属性，type 必须严格为 "application/pdf"，否则浏览器可能下载而非渲染；本地 file:// 协议下需用本地服务器测试，跨域需服务端配置 CORS；动态切换资源须重建 DOM 节点，fallback 内容须直出 object 标签内。
object 标签嵌入 PDF 时 data 和 type 必须同时正确
浏览器对 object 加载 PDF 的判断非常依赖 type 属性。只写 data="report.pdf" 不够，必须显式指定 type="application/pdf"，否则 Chrome/Firefox 可能直接下载文件，而不是内联渲染。
常见错误现象：PDF 文件点击后弹出下载框，或页面显示空白/“无法加载”提示。
-
type值必须严格匹配 MIME 类型，"application/pdf"不能写成"pdf"或"application/x-pdf" - 本地开发时若用 file:// 协议，部分浏览器（如 Chrome）会因安全策略拒绝加载 PDF，建议用本地服务器（如
python3 -m http.server）测试 - 如果 PDF 资源跨域，需服务端返回
Access-Control-Allow-Origin: *，否则控制台报CORS error
嵌入视频时 object 不如 video 标签可靠
虽然 object 理论上支持视频（如 type="video/mp4"），但实际兼容性极差：Safari 完全忽略，Firefox 表现不稳定，且不支持 controls、autoplay 等原生属性。现代项目应优先使用 video 标签。
真正需要 object 处理视频的场景极少，仅限于旧系统集成（如调用 Windows Media Player ActiveX 插件）。
立即学习“前端免费学习笔记（深入）”；
- 不要用
<object data="movie.mp4" type="video/mp4">替代<video>—— 它不会获得播放控件、字幕、全屏等能力 - 若必须兼容 IE6–IE11 且依赖 WMP，需写
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"并配<param name="fileName" value="xxx.wmv"> - WMV/ASF 格式在现代浏览器中基本不可用，
object对这类资源已无实用价值
动态切换 object 多媒体资源必须重建 DOM 节点
object 的 data 属性是只读“初始化快照”——JavaScript 修改 el.data = "new.pdf" 或 el.setAttribute('data', 'new.pdf') 完全无效，已加载的内容不会刷新，也不会触发新请求。
这是最常被误用的点，尤其在实现 PDF 查看器翻页、多文档切换时。
- 正确做法是：创建新
object元素，完整设置data、type、width、height，并手动复制原有<param>子节点（如有） - 替换时推荐用
el.parentNode.replaceChild(newObj, el)，避免闪屏可先设newObj.style.display = 'none'，监听load事件后再显示 - 注意：PDF 加载完成不触发标准
load事件，可用setTimeout延迟显示，或监听其内部document就绪（不可靠），更稳妥是用固定延迟 + 用户反馈机制
替代内容 fallback 的写法必须紧贴 object 标签内部
object 的 fallback 文本或元素必须作为其直接子内容，放在 <object>...</object> 之间，且不能包裹在 <div> 或其他块级标签里，否则多数浏览器会忽略。
例如，显示“请下载 PDF”提示时，文字或链接要直出，而非套一层容器。
- ✅ 正确：
<object data="a.pdf" type="application/pdf">请<a href="a.pdf">下载查看</a></object> - ❌ 错误：
<object><div>请下载</div></object>——<div>会被跳过，fallback 不生效 - 如果 fallback 需要样式，只能用内联
style，或借助<noscript>组合（但object自身不依赖 JS）
真正麻烦的地方不在语法，而在于 object 的行为边界模糊：它既不是纯展示容器，也不是可控组件；它的加载时机、错误反馈、重载逻辑都藏在浏览器黑盒里。用之前先确认——你面对的是 PDF 查看、遗留插件集成，还是只是想找个 video 的替代品？后者基本可以立刻放弃。
