JavaScript 解决 IFrame 数据缓存问题:通过修改 src 强制刷新

作者:沉舟

时间:2026-10-23

浏览:71

本文介绍在跨 IFrame 操作导致数据缓存时,如何通过动态修改 IFrame 的 src 属性来强制刷新内容。相比传统的 reload 方法,该方法通过拼接随机数避免缓存,确保父窗口与子窗口数据同步,适用于批量操作后的局部刷新场景。

文章目录

IFrame 数据缓存问题分析

当用户首次从主窗口进入名为 {A} 的 IFrame 时,页面显示的是最新数据。随后用户切换到另一个名为 {B} 的 IFrame,此时 {B} 中的数据也是最新的。在 {B} 中执行某些逻辑处理(例如向 {A} 批量增加模型数据)后,再次回到 {A} 会发现数据并未更新,而是被浏览器缓存。由于 {B} 与服务器通信并执行了逻辑层或持久层操作,服务器端仅更新了 {B} 对应的部分,这属于局部刷新。然而,我们需要确保 {A} 中的内容也能同步更新。



常见刷新方法的局限性

解决方案:


首先,直接调用 iframe.window.location.reload() 不符合当前需求。


其次,使用 window.setTimeout(iframe.window.loadction.reload(), 1000) 这种方式可能导致多次刷新,且如果需要在 {A} 中更新 {B} 的数据,该方法并不适用。


基于禁用缓存的解决方案

经过研究,问题的核心在于 IFrame 的缓存机制。解决思路很简单:直接禁止缓存。一旦不缓存,自然就不需要执行刷新操作了。


JavaScript 强制刷新代码示例

示例:


代码如下:

 
function doInsert2BatchCallBack() {
var pIf = parent.document.getElementById('IFRAME_A');
pIf.src = pIf.src + "&".concat(Math.random());
//提交批量导入请求
} 

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章