使用 iframe出现了缓存，导致页面不会刷新的解决方案_iframe缓存怎么解决

事情是这样的，我在打代码的时候，需要在A页面里引入B页面

我使用了iframe 这个标签 来引入页面B

但是我发现 当我更改完页面B的内容 将它上传到服务器后，我访问这个A页面，这个我使用iframe 引入的页面B 的内容并没有更新,经过一番研究搜索，我发现了 是iframe这个标签带的缓存导致的

解决方案一：

把原来的ifram 标签变成div

   <dic id="activity">  </div>

然后在JS里 进行这个ifram的引用操作

  // 获取div标签
    var activity = document.querySelector('#activity');
    // 创建日期
    var ts = new Date().getTime()
    // 使用es6模板语法 将变量拼接到地址栏
    document.write(`<iframe  src="./RainEffect-master/demo/index.html?+${ts}"frameborder="0"></iframe>`)

这个时间的作用就是：

在iframe指向的页面地址后缀添加一个时间戳。确保每次加载时，让浏览器知道它是最新的页面，避免缓存。

可是这里就结束了吗？并没有，又出现了一个新的问题

当你更新页面内容的时候你会发现正常更新了，但是CSS样式并没有更新！

原因：

页面B引入的CSS文件（注意是引入的CSS文件） 在ifram中也存在缓存，但是上面这个方法明显解决不了ifram中CSS文件的缓存问题

解决方案：

直接在B页面里 写个stlye标签 来写CSS 样式 这样CSS样式就能及时更新了

下面说下 我有篇 用 jquery 引入页面 的缓存解决方案

把引入的代码改成 下面的就可以了 ，也是加了个时间

    $(function () {
        // 创建时间
        var ts = new Date().getTime()
        $(document).ready(function () {
            //jquery load方法加载公共头部
            // 使用 es6模板语法进行变量拼接
            $("#header").load(`./header.html?${ts}`, function () { //加载完成后设置高亮
                $("#navigation_1").children().attr("style", "color: #fff");
                $("#navigation_1").attr("class", "selected");
            });
        });
    })

解决方案二 :

游览器进入直接刷新ifram 标签：

   //  进入事件
    window.onload = function () {
         onloadIfram()
    }
     // 刷新ifram
     function onloadIfram() {
         document.getElementById('#activity').contentWindow.location.reload();
    }