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

首頁

web前端

html教學

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:41 AM

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">&times;</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

HTML標籤和HTML屬性有什麼區別？May 14, 2025 am 12:01 AM

HTMLtagsdefinethestructureofawebpage,whileattributesaddfunctionalityanddetails.1)Tagslike,,andoutlinethecontent'splacement.2)Attributessuchassrc,class,andstyleenhancetagsbyspecifyingimagesources,styling,andmore,improvingfunctionalityandappearance.

HTML的未來：進化和趨勢May 13, 2025 am 12:01 AM

HTML的未來將朝著更加語義化、功能化和模塊化的方向發展。 1)語義化將使標籤更明確地描述內容，提升SEO和無障礙訪問。 2)功能化將引入新元素和屬性，滿足用戶需求。 3)模塊化將支持組件化開發，提高代碼復用性。

為什麼HTML屬性對Web開發很重要？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopment forcontrollingBehavior，外觀和功能

Alt屬性的目的是什麼？為什麼重要？May 11, 2025 am 12:01 AM

alt屬性是HTML中標籤的重要部分，用於提供圖片的替代文本。 1.當圖片無法加載時，alt屬性中的文本會顯示，提升用戶體驗。 2.屏幕閱讀器使用alt屬性幫助視障用戶理解圖片內容。 3.搜索引擎索引alt屬性中的文本，提高網頁的SEO排名。

HTML，CSS和JavaScript：示例和實際應用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在網頁開發中的作用分別是：1.HTML用於構建網頁結構；2.CSS用於美化網頁外觀；3.JavaScript用於實現動態交互。通過標籤、樣式和腳本，這三者共同構築了現代網頁的核心功能。

如何在標籤上設置lang屬性？為什麼這很重要？May 08, 2025 am 12:03 AM

設置標籤的lang屬性是優化網頁可訪問性和SEO的關鍵步驟。 1)在標籤中設置lang屬性，如。 2)在多語言內容中，為不同語言部分設置lang屬性，如。 3)使用符合ISO639-1標準的語言代碼，如"en"、"fr"、"zh"等。正確設置lang屬性可以提高網頁的可訪問性和搜索引擎排名。

HTML屬性的目的是什麼？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外觀和互動，使網站互動，響應式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，類，類型，類型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中創建列表？May 06, 2025 am 12:01 AM

toCreateAlistInHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulletedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，casundfornthetthetthetthetthetthetthetttributefordforderfordforderforderentnumberingsnumberingsnumberingStys。

See all articles