直接修改 <object> 的 data 属性无法动态切换资源，因其仅在首次插入 DOM 时读取；正确做法是销毁旧节点并用新创建的 <object> 替换，同时手动复制属性、子节点并重绑事件。
不能靠改 data 属性来动态切换 —— 这是绝大多数人第一次踩的坑。浏览器只在 <object> 首次插入 DOM 时读取 data 值，后续任何 JavaScript 修改（比如 el.setAttribute('data', newUrl)）都不会触发重载，也不会重新请求资源。
为什么直接改 data 属性无效
现代浏览器（Chrome/Firefox/Safari）对 <object> 的 data 属性变更完全不响应。即使你同时更新了 type、清空子节点、甚至触发 location.reload()，旧内容仍卡住不动。这不是缓存问题，而是规范行为：DOM 插入即“冻结”加载逻辑。
- IE 曾尝试 reload，但行为不一致，不可依赖
-
<param>子元素的变更同样无效 - 监听
load或error事件也收不到新请求的回调
正确做法：销毁并重建 object 节点
必须用 DOM 替换，不是“刷新”，而是“换人”。核心是创建全新 <object> 元素，完整复制必要属性和子节点，再用 replaceChild() 替掉旧节点。
- 用
document.createElement('object')创建新实例 - 手动设置
data、type、width、height等属性（不能靠cloneNode(true)，部分浏览器会复用旧状态） - 若原
<object>含<param>，需逐个param.cloneNode(true)并appendChild到新节点 - 替换前可设
newObj.style.display = 'none'，等load事件后再显示，避免闪屏
不同 media 类型的实际兼容差异
<object> 不是万能容器，能否成功切换，取决于底层机制是否支持：
立即学习“前端免费学习笔记（深入）”；
-
application/pdf：多数桌面浏览器可切换成功，但移动端 Safari 常静默失败（无error事件） -
image/svg+xml：切换稳定，且 SVG 内部脚本/交互会重新初始化 -
text/html：可切换，但新页面中 JS 不自动执行（除非内联 +defer），且跨域 iframe 受限 -
video/mp4或audio/mpeg：不推荐 ——<video>/<audio>标签才是正解，它们原生支持src+load()
容易被忽略的关键细节
替换后，旧 <object> 的事件监听器不会自动迁移；如果之前绑了 load 或自定义处理逻辑，必须在新节点上重新绑定。另外，某些旧插件类资源（如 ActiveX 控件）在重建后可能丢失 session 上下文或本地状态，这类场景建议彻底迁出 <object> 方案。
