IE上自己制作选项卡菜单类中遇到的iframe缓存有关问题-HTML教程-爱易网页

IE上自己制作选项卡菜单类中遇到的iframe缓存有关问题

日期：2014-05-17　浏览次数：20867 次

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>&nbsp;<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"

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

IE上自己制作选项卡菜单类中遇到的iframe缓存有关问题

相关资料更多>

推荐阅读更多>