IE下自己制作选项卡菜单类中遇到的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>
//================ 全局变量 =========================
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 alt="IE上自己制作选项卡菜单类中遇到的iframe缓存有关问题" />
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();
}
});
