原理:用多个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
多选项卡测试 #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;}
查看A
查看更多关于IE下自己制作选项卡菜单类中遇到的iframe缓存问题_html/css_WEB-ITnose的详细内容...
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://haodehen.cn/did113035