IE下自己制作选项卡菜单类中遇到的iframe缓存问题_html/css_WEB-ITnose
程序员文章站
2022-04-24 08:07:55
...
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
2. js文件 iframe.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
多选项卡测试
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'+JQ.attr("name")+''); }else{ CL.CL_obj.append(''+JQ.attr("name")+''); } 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×