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技术人员就该问题的处理有点让人匪夷所思啊 呵呵
稍后结贴
What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PMThe article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PMThe article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PMThe article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
What is the purpose of the <iframe> tag? What are the security considerations when using it?Mar 20, 2025 pm 06:05 PMThe article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PMThe article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PMArticle discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PMThis article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit
What is the viewport meta tag? Why is it important for responsive design?Mar 20, 2025 pm 05:56 PMThe article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
SublimeText3 Linux new version
SublimeText3 Linux latest version
