IE下自己制作选项卡菜单类中遇到的iframe缓存问题_html/css



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

//================ 全局变量 =========================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=0){	if (CL.CL_menu[sign]){	CL.CL_showPrograme(sign);	isDo=1;	break;	}else{	sign--;	}	}	if (isDo){	return false;	}	sign=index+1;	while(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技术人员就该问题的处理有点让人匪夷所思啊 呵呵 
 稍后结贴