object标签的data属性无法动态更新资源，浏览器仅在首次插入dom时读取一次，后续修改无效；必须销毁旧节点、创建新object元素并替换。

object 标签的 data 属性不能动态更新资源——这是最常被误用的地方。改完 data 值，浏览器不会重新加载，也不会触发任何请求，已渲染的内容保持不变。

为什么直接改 data 属性无效

浏览器只在 object 元素**首次插入 DOM 时**读取一次 data 值。后续任何 JavaScript 修改（如 el.data = 'new.pdf' 或 el.setAttribute('data', 'new.mp4')）都完全被忽略。这不是兼容性问题，而是现代 Chrome/Firefox/Safari 的明确行为规范。

• 即使 type 属性设对了（比如 "application/pdf" 或 "video/mp4"），也不改变该限制
• 部分旧版 IE 曾尝试 reload，但行为不可靠，且早已弃用
• DOM 中的子元素（如 <param>）也不会随 data 变更而重生效

正确替换 object 实现资源切换

必须销毁旧节点、创建全新 object 元素并插入 DOM。不是“更新”，而是“换人”。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 用 document.createElement('object') 创建新节点，完整设置 data、type、width、height 等属性
• 若原 object 包含 <param> 子元素，需手动 cloneNode(true) 并追加到新节点
• 用 parentNode.replaceChild(newObj, oldObj) 完成替换，避免闪屏可先设 newObj.style.display = 'none'
• 监听新 object 的 load 事件再显示（注意：不是所有类型都触发 load，PDF 和视频较稳定，Flash 已淘汰）

对比 embed 和 iframe 的适用场景

embed 行为与 object 类似：修改 src 属性同样不触发重载，也得走 DOM 替换；但它更轻量、无需 type，适合简单媒体（如音频、SVG）。

• iframe 是唯一能真正“动态加载并执行完整 HTML 文档”的方案，支持脚本运行、CSS 加载、跨文档通信（postMessage），但隔离性强，样式和变量不共享
• object 更适合 PDF、旧插件类资源（虽已基本淘汰），或需要与父页面共享 JS 上下文的极少数场景
• 现代项目中，优先考虑 iframe（HTML 内容）、video/audio（媒体）、fetch+DOM（结构化数据），而非 object

最容易被忽略的一点：哪怕你用 URL.createObjectURL(blob) 生成临时地址并赋给 data，仍要走完整替换流程——因为触发重载的不是 URL 本身，而是元素是否为“新插入”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！