使用 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()}// 刷新iframfunction onloadIfram() {document.getElementById('#activity').contentWindow.location.reload();}

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

layui让当前页面刷新_layui点击按钮页面会自动刷新的解决方案
问题: Title 输入框 test layui.use(['laytpl','jquery','layer','form'],function () { var laytpl = layui.lay ...
手机软键盘弹起导致页面变形的一种解决方案
最近用 uniapp(一种第三方 app 开发框架) 开发 app,其中一个页面有十几个 input 输入框,在点击 input 输入时,软键盘弹起,导致页面往上顶,底部的按钮也全部弹到页面上面去了, ...
nuxt 更新部署因浏览器缓存导致页面错误解决方法
部署nuxt项目后更新项目后部分页面会发生错误,无法进入,但是清除浏览器缓存和无痕模式正常显示查原因查了大半天,后发现主要原因是因为项目更新后浏览器进行本地缓存解决方法保证版本更新时与上版本文件名 ...
浏览器缓存导致FLASH资源更新问题的解决方案
在网上搜浏览器缓存问题时,遇上了很多问题.一是不知道应该用何种关键字搜索,二是一搜出来,就全是讲的是如何禁用浏览器缓存的方案. 作为大型点的FLASH WEBGAME来说,不缓存显然是不行的.总体上来 ...
通过setTimeout调用设置iframe src的方法导致刷新页面时弹出没有权限错误！
通过setTimeout调用设置iframe src的方法导致刷新页面时弹出没有权限错误! 如下: Html代码 <iframe tabindex="4" id=" ...
页面缓存导致数据错误
页面缓存导致数据错误服务端渲染(ssr)会将 API 数据做页面元素返回给前端, 而浏览器会认为是静态页面并将页面缓存, 导致每次访问时都是缓存用户数据. 页面又包含对数据的处理并提交. 当多端更新 ...
解决iframe动态切换src后历史记录，导致页面后退变为iframe后退的问题
现象最近有一个项目内嵌了一个iframe,会在一定条件下动态切换其的src达到切换页面的效果.同时页面父页面中有回退按钮,直接调用的go(-1).此时就产生了一个奇怪的现象:点击回退按钮,ifram ...
apache缓存php页面不改变,Apache服务器禁止静态文件缓存的实现方法
之前在<PHPnow中开启apache的浏览器缓存(max-age)功能>一文中,余斗主要讲了如何开启apache服务器的缓存功能,然而很多时候线上如果缓存静态文件能够提高服务器性能和用户 ...
js初化加载页面时ajax会调用两次的原因_在前端开发中，有哪些因素会导致页面卡顿
前端开发不像后端那样,很少出现有大量算法的场景,但是前端性能也是需要优化的.好的代码是保证网页平稳高性能运行的基础,结合以往开发中遇到的场景,本文对前端网页卡顿的原因进行了梳理和分析,并给出了对应的解 ...

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

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

最新文章

热门文章