在模态框中需动态重建才能加载，须满足dom已挂载、父容器可见、data属性首次设置；推荐在shown.bs.modal或showmodal()后创建新元素并插入，避免仅修改data或复用旧节点。
<object></object> 标签在模态框中动态渲染，不能靠简单插入 innerHTML 或 setAttribute 就生效。浏览器对 <object></object> 的加载是惰性的，且依赖 DOM 插入时机、data 属性是否已就绪、以及是否处于“可渲染上下文”（比如 display: none 的父容器会中断加载）。
<object></object> 在模态框里不加载的常见表现
- 模态框用
display: none隐藏时，<object data="xxx.pdf"></object>完全不发起请求，Network 面板无任何加载记录 - 模态框显示后手动修改
object.data，但内容不刷新（尤其 PDF、SVG） - 切换不同
data值时，旧资源仍缓存显示，新资源不触发重载 - 在 Bootstrap 或自定义 fade 动画模态框中，
<object></object>出现空白或“无法加载插件”提示（即使浏览器原生支持 PDF）
动态替换 <object></object> 的正确做法
必须满足三个条件：DOM 已挂载 + 父容器可见 + data 属性在插入后首次设置
- 使用
appendChild()或replaceChildren()替换整个<object></object>元素，而不是只改data属性 - 确保模态框容器已应用
display: block且不在 transition 动画中途（例如 Bootstrap 的show.bs.modal事件比shown.bs.modal早，此时元素可能还没脱离opacity: 0） - 对 PDF、SVG 等资源，建议每次加载前加时间戳参数防缓存：
pdf-url.pdf?t=1726931580 - 若模态框使用
hidden属性或visibility: hidden，<object></object>仍可能不加载——必须用display: none/block控制显隐
// ✅ 推荐：在 shown.bs.modal（Bootstrap）或 dialog.showModal() 后执行
modal.addEventListener('shown.bs.modal', () => {
const obj = document.createElement('object');
obj.type = 'application/pdf';
obj.data = '/docs/report.pdf?' + Date.now(); // 强制刷新
obj.width = '100%';
obj.height = '600px';
modalBody.replaceChildren(obj); // 清空并插入新 object
});
<object></object> + <dialog></dialog> 组合的坑点
<dialog></dialog> 默认用 display: none 初始化，且 showModal() 不会自动触发子元素重载：
- ❌ 错误：先写好
<object data="a.pdf"></object>在<dialog></dialog>内，再调用showModal()→ PDF 不加载 - ✅ 正确：在
dialog.showModal()调用之后，再动态创建并 append<object></object> - Safari 对
<object></object>加载更敏感，若父<dialog></dialog>有transform或will-change，可能直接拒绝渲染 —— 临时移除这些样式再插入
替代方案：什么时候该放弃 <object></object>
- 需要控制加载状态（如 loading spinner）、错误 fallback（如“PDF 不可用”提示）→ 改用
<iframe></iframe>，它对动态src更友好，且可通过onload/onerror监听 - 渲染 SVG 且需 JS 交互（如绑定 click）→ 直接用
fetch()获取 SVG 字符串，insertAdjacentHTML('beforeend', svgStr)注入，避免<object></object>的跨域和脚本隔离限制 - 显示 PDF 但要求缩放、下载、打印等 UI → 用
pdf.js，<object></object>无法提供这些能力
<object></object> 的动态性很弱，它不像 <img> 那样响应属性变更。真正可靠的做法，永远是“销毁旧节点 → 创建新节点 → 插入到已显示的容器中”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
