object标签不支持多文件切换，仅能通过JS手动替换data属性并重建元素实现；频繁切换易致渲染阻塞，推荐PDF用iframe、SVG用object配合状态隔离处理。

object 标签本身不支持多文件切换

object 是单资源嵌入标签，它的 data 属性只接受一个 URL，每次只能加载一个外部资源。想用它“切换”PDF、SVG 或其他内容，本质是手动替换 data 值并触发重载——不是内置能力，而是靠 JS 控制 DOM 属性变更。

切换时必须主动清理旧实例，否则 PDF 预览卡死

浏览器对 object 的 PDF 渲染器复用不透明，频繁修改 data 可能导致渲染线程阻塞、页面假死，尤其在 Chrome 和 Edge 中常见。不能只改 data 就完事：

• 先移除旧 object 元素（el.remove()），再创建新元素插入，比直接改 data 更可靠
• 若坚持复用同一节点，需在设新 data 前清空其子内容（如 el.innerHTML = ''），避免备用文本残留干扰
• 切换后监听 load 事件确认加载完成，再启用操作按钮；未监听就点“下一页”，可能操作的是上一个文档的残留状态

PDF 切换推荐用 iframe，object 仅用于降级兜底

现代浏览器对 iframe 嵌入 PDF 的支持更稳定，且切换时只需更新 src，无须销毁重建。而 object 的优势在于 fallback 内容——当 PDF 不可用时，能优雅显示提示或替代图：

<object data="doc1.pdf" type="application/pdf" width="100%" height="600">
  <p>PDF 加载失败。</p>
  <a href="doc1.pdf" download>点击下载</a>
</object>

但如果你硬要用 object 实现多文件切换，核心逻辑是：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

立即学习“前端免费学习笔记（深入）”；

• 维护一个文件路径数组，比如 const pdfs = ['a.pdf', 'b.pdf', 'c.pdf']
• 用索引控制当前项，切换时先移除旧 object，再动态生成新 object 并插入容器
• 不要依赖 object.onload：它在 PDF 场景下不可靠；改用 setTimeout 延迟 100ms 后检查 contentDocument 是否可读，或直接信任浏览器自动渲染

SVG 切换可用 object，但要注意内联脚本失效

如果切换的是 SVG 文件，object 是合理选择——它会建立独立上下文，支持 SVG 内的 CSS 和 JS（如交互式图表）。但注意：

• 每个 SVG 文件里的 <script> 只在首次加载时执行；切换到同一文件两次，脚本不会重复运行
• 不同 SVG 间无法共享变量或函数，状态完全隔离
• 若 SVG 含 <use href="#symbol"> 引用外部定义，确保所有符号都在同一文件内，跨文件引用在 object 中大概率失败

真正容易被忽略的点：切换过程中用户可能快速连点，导致多个 object 元素同时存在却未被清除——必须加 loading 状态锁，或用 Promise 队列串行化切换请求。