位置: IT常识 - 正文
使用 iframe出现了缓存，导致页面不会刷新的解决方案(iframe frame)
编辑：rootadmin推荐整理分享使用 iframe出现了缓存，导致页面不会刷新的解决方案(iframe frame)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:iframe vh,iframe使用详解,iframe使用详解,iframe使用详解,使用iframe有哪些缺点,iframe vh,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()}// 刷新iframfunction onloadIfram() {document.getElementById('#activity').contentWindow.location.reload();}下一篇：hpbpro.exe是什么进程 有什么作用 hpbpro进程查询(hptlbxfx.exe)