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><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter"><img src="https://img.php.cn/upload/skill/000/000/081/179232667384043.jpg" alt="html-to-pptx-converter" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="overflowclass">html-to-pptx-converter</a> <p class="overflowclass">使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。</p> </div> <a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <a href="doc1.pdf" download>点击下载</a> </object>
但如果你硬要用 object 实现多文件切换，核心逻辑是：
- 维护一个文件路径数组，比如
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></script>只在首次加载时执行；切换到同一文件两次，脚本不会重复运行 - 不同 SVG 间无法共享变量或函数，状态完全隔离
- 若 SVG 含
<use href="#symbol"></use>引用外部定义，确保所有符号都在同一文件内，跨文件引用在object中大概率失败
真正容易被忽略的点：切换过程中用户可能快速连点，导致多个 object 元素同时存在却未被清除——必须加 loading 状态锁，或用 Promise 队列串行化切换请求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
