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

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

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

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

解决方案一：

把原来的ifram 标签变成div

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

  // 获取div标签    var activity = document.querySelector('#activity');    // 创建日期    var ts = new Date().getTime()    // 使用es6模板语法 将变量拼接到地址栏    document.write(``)

这个时间的作用就是：

在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();    }