object标签加载HTML内容会缓存，因浏览器按data URL发起HTTP请求并遵循响应头缓存策略；解决需URL唯一（如加时间戳参数）、服务端禁用缓存或清除CDN/SW缓存。
object 标签加载的 HTML 内容为何会缓存
<object></object> 标签嵌入外部资源（如 html、pdf 或 svg）时，浏览器会像请求普通资源一样发起 HTTP 请求，并遵循响应头中的缓存策略。如果服务器返回了 Cache-Control: public, max-age=3600 或未设 no-cache，后续相同 data URL 的 <object></object> 就会直接从本地缓存加载，不发新请求——导致你改了被嵌入的 HTML 文件，页面却始终不更新。
强制 object 重新加载的三种实操方式
关键不是“清除整个浏览器缓存”，而是让每次 <object data="xxx.html"></object> 的请求 URL 都不同，或绕过缓存机制：
- 在
data属性值末尾添加时间戳参数：data="content.html?t=1726942027"（用Date.now()动态生成），确保每次加载 URL 唯一 - 用 JavaScript 动态设置
data属性并触发重载：const obj = document.getElementById('my-object');<br>obj.data = 'content.html?' + Date.now();注意：仅改data不会自动重载，需先清空再赋值，或配合obj.setAttribute('data', ...)+ 强制重绘（如obj.style.display='none'; setTimeout(() => { obj.style.display='block' }, 0)） - 服务端对被嵌入的 HTML 文件配置强不缓存响应头，例如 Nginx 中：
location ~ \.html$ {<br> add_header Cache-Control "no-cache, no-store, must-revalidate";<br> add_header Pragma "no-cache";<br> add_header Expires "0";<br>}此法对所有通过<object></object>加载的该类文件生效，但需服务器权限
为什么禁用开发者工具的 Disable cache 对 object 无效
勾选 Network 标签页的 Disable cache 只影响当前 DevTools 打开状态下的普通页面导航和脚本/样式请求，而 <object></object> 加载的子文档（subdocument）属于独立浏览上下文，其资源请求**不受主页面 DevTools 缓存开关控制**。实测 Chrome/Firefox 均如此。所以不能依赖它来调试 <object></object> 的缓存问题。
容易忽略的 CDN 和 Service Worker 干扰
如果你的 content.html 走了 CDN（如 Cloudflare）或注册了 Service Worker，即使你本地改了 URL 参数，CDN 节点或 SW 仍可能按原始路径缓存响应。此时必须：
立即学习“前端免费学习笔记（深入）”；
- 在 CDN 控制台手动刷新对应 URL（如提交
content.html的缓存剔除） - 检查是否有全局
Service Worker拦截了object请求——可在 Application → Service Workers 中点击 “Unregister”，或在代码中调用navigator.serviceWorker.getRegistrations().then(r => r.forEach(reg => reg.unregister())) - 确认
object的dataURL 是绝对路径（如/assets/content.html），而非相对路径（如content.html），否则不同入口页下解析出的完整 URL 可能不一致，导致缓存键错乱
真正起效的方案永远是「URL 唯一性 + 服务端配合」，而不是反复清浏览器缓存。尤其当 <object></object> 用于加载可变内容（如用户生成的 HTML 片段）时，时间戳参数是最轻量且可控的做法。
