iframe缓存问题根源是http缓存机制；前端最简解法是动态添加date.now()时间戳参数确保url唯一，但必须配合服务端设置cache-control: no-store才能彻底禁用多层缓存。
iframe 缓存不是 HTML5 的锅，而是 HTTP 缓存机制在作祟；不改 src 或不设服务端响应头，光靠刷新页面或 location.reload() 无效。
给 iframe.src 动态加时间戳参数是最简单有效的前端解法
浏览器对 src 的缓存判断完全基于 URL 字符串是否相同。只要 URL 变了，就视为新请求，绕过缓存。
- 用
Date.now()比Math.random()更可靠：避免同一页面多次渲染时重复加载或生成重复参数 - 不要拼太长的参数，例如
?v=1724609040123&token=xxx&debug=true，URL 长度超 2048 字符可能被截断或拒绝 - 若需局部刷新 iframe（比如按钮触发），封装成函数并每次更新
src，别只改src后又赋同一个值 - 示例：
const iframe = document.getElementById('my-iframe');<br>iframe.src = '/report.html?v=' + Date.now();
Cache-Control: no-store 是服务端必须设的硬性响应头
前端加参数只是“骗过”缓存，服务端不配合，iframe 内容仍可能被中间代理（CDN、网关）或浏览器复用旧响应。
-
no-cache不够：它允许缓存，只要每次用前校验（可能返回304 Not Modified） -
must-revalidate要搭配no-store一起用，防止代理层忽略指令 -
Pragma: no-cache和Expires: 0是兼容性补充，但现代浏览器主要认Cache-Control - Nginx 配置示例：
location /widget.html {<br> add_header Cache-Control "no-store, must-revalidate";<br> add_header Pragma "no-cache";<br> add_header Expires "0";<br>}
开发者工具里看到 from memory cache 或 from disk cache 就说明没生效
这不是警告，是明确证据：浏览器根本没发请求，直接从本地缓存取了内容。
- 打开 DevTools → Network → 点开 iframe 对应的请求 → 查看 Response Headers 是否含
Cache-Control: no-store - 如果 headers 里没有，或值是
max-age=3600这类，说明服务端配置未生效或被覆盖 - 勾选 Network 面板的
Disable cache只影响当前调试会话，关掉就失效，不能当解决方案 -
meta http-equiv="Cache-Control"在 iframe 子页中完全无效——它只对顶层文档起作用
真正难啃的是多层缓存叠加：浏览器 + CDN + 反向代理 + 服务端框架默认缓存。前端加参数能解决 80% 场景，但要彻底禁用，必须逐层确认 Cache-Control: no-store 到达了最终响应体。漏掉任意一层，iframe 就可能静默复用旧内容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
