IE下自己制作选项卡菜单类中遇到的iframe缓存问题_html/css_WEB-ITnose
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技术人员就该问题的处理有点让人匪夷所思啊 呵呵
稍后结贴
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Quel est le but du & lt; Progress & gt; élément?
Mar 21, 2025 pm 12:34 PM
L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati
Quel est le but du & lt; datalist & gt; élément?
Mar 21, 2025 pm 12:33 PM
L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159
Quel est le but du & lt; mètre & gt; élément?
Mar 21, 2025 pm 12:35 PM
L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Mar 17, 2025 pm 12:20 PM
L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Mar 17, 2025 pm 12:27 PM
L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.
Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive?
Mar 20, 2025 pm 05:56 PM
L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.
Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?
Mar 20, 2025 pm 06:05 PM
L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.
Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404?
Apr 04, 2025 pm 11:54 PM
GiteEpages STATIQUE Le déploiement du site Web a échoué: 404 Dépannage des erreurs et résolution lors de l'utilisation de Gitee ...
