目录
IE下自己制作选项卡菜单类中遇到的iframe缓存问题_html/css_WEB-ITnose
js选项卡 iframe 缓存
需求：使用DIV元素配合JS来实现网页选项卡菜单原理：用多个iframe来实现多个选项卡内容的展示，当前选项卡显示当前对应的iframe，其他iframe则隐藏，并非在一个iframe中实现，而是n个选项卡就对应n个iframe
问题描述：当关闭选项卡时会用JQuery的remove()方法删除对应的选项卡及iframe，但页面F5刷新时若留一个选项卡则初始化的选项卡中显示的居然会是上一次停留下来的选项卡中对应的页面，如下代码，运行时自动会打开查看A为《初窥iWatch用户界面》，然后按左下的查看B打开《可穿戴设备：》，然后停留在查看B并点击查看A选项上的关闭按钮关闭对应iframe，此时按F5刷新，在IE中会发现此时虽然选项卡是查看A，但页面却是查看B中所对应的《可穿戴设备：》，但在firefox中没有该问题！
初步估计是缓存问题，按传统iframe页面的增加随机数后缀参数无法解决，需要打开页面后紧接着在刷新下页面可以实现，不过连续两次打开会影响加载效率，更有页面初始化事件在这种情况下将会执行两次，故不太可取。问大家是否有何解决方案，或者说其实本是代码上的问题。
以下为代码，jQuery版本对应的是1.7的，不在另行提供jQuery代码
1. html文件 iframe.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"> <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"><title>多选项卡测试</title><link rel="stylesheet" type="text/css" href="CSS/publicStyle.css" /><style type="text/css">#programeBody{ height:30px; background-color:#66CCFF;}#programeBody a{ display:block; height:30px; line-height:30px; width:90px; margin-right:5px; background-color:#003366; color:#FFFFFF; float:left; text-align:center; overflow:hidden; position:relative;}#programeBody .sel{ background-color:#FF3300;}#programeBody .close{ display:block; position:absolute; top:0px; right:0px; height:10px; width:10px; border:1px solid #FF0000; background-color:#FFFFFF; text-align:center; line-height:10px; color:#333333; overflow:hidden;}#bottom{ height:30px; line-height:30px; background-color:#CCCCCC;}</style><script language="javascript" src="js/jquery.js"></script><script language="javascript" src="js/iframe.js"></script></head><body><div id="mainpage"> <div id="programeBody" class="programeObject" moveButton="1" move="w" sel="1" content="programeContent"> <a href="http://www.csdn.net/article/2013-02-25/2814257-iWatch-will-usher-in-Time-Based-UI">查看A</a> </div> <div id="programeContent"></div></div><div id="bottom"><a href="http://www.csdn.net/article/2013-02-25/2814257-iWatch-will-usher-in-Time-Based-UI" class="programeButton" name="页面A" to="programeBody">查看A</a> <a href="http://www.csdn.net/article/2013-02-10/2814117-speculates-on-future-iwatch" class="programeButton" name="页面B" to="programeBody">查看B</a></div></body></html>登录后复制
2. js文件 iframe.js
//================ 全局变量 =========================var CW=0; //main页面内容框宽度var CH=0; //main页面内容框高度var PM=new Array(); //存放选项卡对象数组$(document).ready(function(){ CW=$("body").width(); CH=$("body").height()-$("#programeBody").height()-$("#bottom").height(); //定义选项卡类 $(".programeObject").each(function(i){ PM[this.id]= new Class_programe_menu($(this)); }); $(".programeButton").click(function(){ PM[$(this).attr("to")].CL_addPrograme($(this)); //屏蔽A元素的链接事件 return false; }); });//================================= 选项卡构造类=====================================//JQ 选项卡菜单最外层的JQ对象function Class_programe_menu(JQ){ this.CL_obj=JQ; //记录类的主框架元素 this.CL_content=JQ.attr("content"); //内容存放的div元素ID名称 this.CL_menu=new Array(); //记录类的菜单项 JQ数组 this.CL_index=JQ.attr("sel"); //记录类的当前菜单选择项，从1开始计数 this.CL_frame=new Array(); //记录当前的iframe框架数组 JQ数组 this.CL_initialization(); //初始化类}//类初始化Class_programe_menu.prototype.CL_initialization=function(){ var CL=this; //放入选项卡对象 CL.CL_obj.children("a").each(function(i){ CL.CL_menu.push($(this)); var indexStore=CL.CL_menu.length-1; CL.CL_addProgrameEvent(indexStore); }); //记录存放iframe元素的内容对象 for (var i=0;i<CL.CL_menu.length;i++){ CL.CL_addIframe(i); } //显示相关选项卡及iframe CL.CL_showPrograme(CL.CL_index-1);}//添加选项卡到选项卡菜单Class_programe_menu.prototype.CL_addPrograme=function(JQ){ var CL=this; //检查当前添加的选项卡是否存在 存在则不添加 仅显示其对应的iframe对象 for (var i=0;i<CL.CL_menu.length;i++){ if (CL.CL_menu[i] && CL.CL_menu[i].attr("href")==JQ.attr("href")){ CL.CL_showPrograme(i); return true; } } //不存在则添加选项卡及iframe 并展示 if (JQ.attr("noClose") && JQ.attr("noClose")==1){ CL.CL_obj.append('<a href="'+JQ.attr("href")+'" noClose="1">'+JQ.attr("name")+'</a>'); }else{ CL.CL_obj.append('<a href="'+JQ.attr("href")+'">'+JQ.attr("name")+'</a>'); } CL.CL_menu.push(CL.CL_obj.children("a").last()); //记录当前CL_menu数组的最大index值，避免在函数事件方法中使用CL.CL_menu.length-1，因为随着菜单增加会导致事件对象错乱 var indexStore=CL.CL_menu.length-1; CL.CL_addProgrameEvent(indexStore); //添加iframe对象 CL.CL_addIframe(indexStore); //显示选项卡及iframe CL.CL_showPrograme(indexStore);}//显示选项卡及对应的iframe对象Class_programe_menu.prototype.CL_showPrograme=function(index){ var CL=this; //把选项卡的class设置为programeButton 使选项卡视觉上都成为不被选择的 CL.CL_obj.children("a").attr("class",""); //把需要的显示的选项卡class添加sel 使视觉上成为被选择的 if (CL.CL_menu[index]){ CL.CL_menu[index].attr("class","sel"); //把所有iframe设置为不可见 $("#"+CL.CL_content).children("iframe").hide(); //把当前index对应的iframe设置为可见 CL.CL_frame[index].show(); }}//添加iframe对象到内容框Class_programe_menu.prototype.CL_addIframe=function(index){ var CL=this; //判断当前的iframe是否在内容框中存在，存在则跳过继续判定，不存在则添加 var contentObj=$("#"+CL.CL_content); //检查CL_frame数组中是否存在当前src值，不存在则添加 if (CL.CL_frame[index] && CL.CL_frame[index].attr("src")==CL.CL_menu[index].attr("href")){ }else{ //添加元素至CL.CL_frame数组 var iframe=document.createElement('iframe'); iframe.src=CL.CL_menu[index].attr("href"); iframe.frameBorder=0; iframe.scroll="auto"; iframe.width=CW; iframe.height=CH; CL.CL_frame[index]=$(iframe); //添加到类对应属性中记录 $("#"+CL.CL_content).append(iframe); //添加到内容框中显示 }}//添加选项卡后为该选项卡绑定事件Class_programe_menu.prototype.CL_addProgrameEvent=function(index){ var CL=this; //绑定选项卡点击事件 CL.CL_menu[index].click(function(){ CL.CL_showPrograme(index); return false; }); //绑定关闭按钮事件 CL.CL_closeEvent(index);}//选项卡关闭事件Class_programe_menu.prototype.CL_closeEvent=function(index){ var CL=this; var JQ=CL.CL_menu[index]; if (JQ.attr("noClose") && JQ.attr("noClose")==1){ return true; } //查看选项卡是否添加关闭按钮，没有添加则添加，若添加则绑定关闭事件 if (JQ.children(".close").length<=0){ JQ.append('<span class="close">×</span>'); } JQ.children(".close").click(function(event){ CL.CL_closePrograme(index); //阻止事件向上级冒泡 return false; });}//关闭选项卡及相关iframeClass_programe_menu.prototype.CL_closePrograme=function(index){ var CL=this; CL.CL_menu[index].remove(); CL.CL_frame[index].remove(); CL.CL_menu[index]=""; CL.CL_frame[index]=""; var sign=index; var isDo=0; //表示已经调整选项卡的显示了 while(sign>=0){ if (CL.CL_menu[sign]){ CL.CL_showPrograme(sign); isDo=1; break; }else{ sign--; } } if (isDo){ return false; } sign=index+1; while(sign<CL.CL_menu.length){ if (CL.CL_menu[sign]){ CL.CL_showPrograme(sign); break; }else{ sign++; } }}//================================= 选项卡构造类=====================================登录后复制
回复讨论(解决方案)
用ie的开发人员工具看了下iframe的地址是a的，但是内容确显示的是b的。。。
ie增加onbeforeunload事件，清空content属性指定的容器的内容就行了。。
$(document).ready(function () { CW = document.documentElement.clientWidth; //CH = $("body").height() - $("#programeBody").height() - $("#bottom").height(); CH = document.documentElement.clientHeight - $("#programeBody").height() - $("#bottom").height(); //定义选项卡类 $(".programeObject").each(function (i) { PM[this.id] = new Class_programe_menu($(this)); }); $(".programeButton").click(function () { PM[$(this).attr("to")].CL_addPrograme($(this)); //屏蔽A元素的链接事件 return false; });///////////// if (document.all) window.onbeforeunload = function () { for (attr in PM) $('#'+PM[attr].CL_content).empty(); } });登录后复制
谢谢版主大人！解决方案如您所说！另外昨天帖子里忘说测试是在IE8中
关闭浏览器或者刷新页面触发的事件平时用的比较少，所以很少关注到这类事件的功能，这次受教了。
从另一方面考虑该问题，IE对于iframe的存在应该会记录iframe所指向的页面，但无法理解的是iframe重载出现的时候却自动加载页面关闭前iframe所呈现（缓存）的网页。IE技术人员就该问题的处理有点让人匪夷所思啊 呵呵
稍后结贴
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
<🎜>：种植花园 - 完整的突变指南
3 周前
By DDD
<🎜>：泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
如何修复KB5055612无法在Windows 10中安装？
3 周前
By DDD
蓝王子：如何到达地下室
1 个月前
By DDD
北端：融合系统，解释
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
了解HTML，CSS和JavaScript：初学者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
HTML：结构，CSS：样式，JavaScript：行为
Apr 18, 2025 am 12:09 AM
HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。
HTML，CSS和JavaScript的未来：网络开发趋势
Apr 19, 2025 am 12:02 AM
HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。
HTML的未来：网络设计的发展和趋势
Apr 17, 2025 am 12:12 AM
HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。
HTML与CSS vs. JavaScript：比较概述
Apr 16, 2025 am 12:04 AM
HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。
HTML：建立网页的结构
Apr 14, 2025 am 12:14 AM
HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。
HTML的角色：构建Web内容
Apr 11, 2025 am 12:12 AM
HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。
HTML：是编程语言还是其他？
Apr 15, 2025 am 12:13 AM
HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。
