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

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

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

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

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

解决方案一:

把原来的ifram 标签变成div

javascript">   <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();
    }
转载请说明出处内容投诉
CSS教程_站长资源网 » 使用 iframe出现了缓存,导致页面不会刷新的解决方案

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买