Jquery tab插件wdScrollTab 在chrome中出现不兼容的问题-优快云博客

本文链接：https://blog.youkuaiyun.com/fireofjava/article/details/41744609

本文探讨了在使用TabPanel组件时遇到的Chrome浏览器中Tab的高度显示异常问题，包括Tab高度只有一行或完全不显示的情况。通过调整Tab容器的高度属性和避免多次执行某些操作，最终找到了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先贴上jsp里面调用的代码

var gh ="${teacher.GH }";
		var grjlurl = _webRootPath + "content/search/teacher/teacher.grjl.jsp?gh="+gh;
		var jcTabs = [
		'<iframe width="100%" scrolling="no" height="100%" frameborder="0" src="'+grjlurl+'" id="grjlList" name="grjlList"></iframe>',
		'<iframe width="100%" scrolling="no" height="100%" frameborder="0" src="" id="kyxmList" name="kyxmList"></iframe>',
		'<iframe width="100%" scrolling="no" height="100%" frameborder="0" src="" id="xslwList" name="xslwList"></iframe>',
		'<iframe width="100%" scrolling="no" height="100%" frameborder="0" src="" id="xszzList" name="xszzList"></iframe>',
		'<iframe width="100%" scrolling="no" height="100%" frameborder="0" src="" id="zscqList" name="zscqList"></iframe>',
		'<iframe width="100%" scrolling="no" height="100%" frameborder="0" src="" id="hjcgList" name="hjcgList"></iframe>',
		'<iframe width="100%" scrolling="yes" height="100%" frameborder="0" src="" id="xcdyList" name="xcdyList"></iframe>'
		];
		j$(document).ready(function(){
		   var tabpanel2 = new TabPanel({  
				renderTo:'tab',  
				width:'99%',  
				//height:'331',  
				//border:'none',
				active : 0,
				//autoResizable : true,
				//maxLength : 6,  
				items : [
					{id:'toolbarPlugin1',title:'个人简历', html:jcTabs[0],closable: false},
					{id:'toolbarPlugin2',title:'科研项目',html:jcTabs[1],closable: false,  func:'doSearchList(1,"kyxmList","getKyxmList.action")'},
					{id:'toolbarPlugin3',title:'学术论文',html:jcTabs[2],closable: false, func:'doSearchList(1,"xslwList","getXslwList.action")'},
					{id:'toolbarPlugin4',title:'学术著作',html:jcTabs[3],closable: false, func:'doSearchList(1,"xszzList","getXszzList.action")'},
					{id:'toolbarPlugin5',title:'知识产权',html:jcTabs[4],closable: false, func:'doSearchList(1,"zscqList","getZscqList.action")'},
					{id:'toolbarPlugin6',title:'获奖成果',html:jcTabs[5],closable: false, func:'doSearchList(1,"hjcgList","getHjcgList.action")'},
					{id:'toolbarPlugin7',title:'薪酬待遇',html:jcTabs[6],closable: false, func:'doSearchList(1,"xcdyList","getXcdyList.action")'}
				]
			});  
		});

在FF,IE等浏览器里面都显示正常

但是在chrome里面出现奇怪的问题，有时候整个tab的高度只有一行，下面的内容不显示

又或者变成下面这样

查看代码发现，第一种错误是因为在TabPanel.js中，alert(this.render.height())得到是0，感觉很奇怪，我单独写了个html测试，又没有出现这样的问题，但在这里,render的高度取出来就是0.renderTo指向的是<div id="tab"></div>, 后来没办法，我把它改成<div id="tab" style="height:100%"></div> 后就正常了，取出来的height就不是0了。

this.height = config.height || '100%';
this.render = typeof this.renderTo == 'string' ? $('#'+this.renderTo) : this.renderTo;

this.render.height(this.height);

this.tabpanel = $('<DIV></DIV>');
this.tabpanel.addClass('tabpanel');
this.tabpanel.width(this.render.width()-hwFix);
this.tabpanel.height(this.render.height()-hwFix);

第二个错误，我发现是因为，下面的部分被执行了两次。

j$(document).ready(function(){}

百思不得其解，后面上网看到有人说jquery的appendTo可能引起这个问题，于是修改代码

          var loaded = false;
		j$(document).ready(function(){
			if(!loaded){
			   loaded = true;
			   var tabpanel2 = new TabPanel({  
			        renderTo:'tab',  
			        width:'99%',  
			        //height:'331',  
			        //border:'none',
			        active : 0,
			        //autoResizable : true,
			        //maxLength : 6,  
			        items : [
						{id:'toolbarPlugin1',title:'个人简历', html:jcTabs[0],closable: false},
						{id:'toolbarPlugin2',title:'科研项目',html:jcTabs[1],closable: false,  func:'doSearchList(1,"kyxmList","getKyxmList.action")'},
						{id:'toolbarPlugin3',title:'学术论文',html:jcTabs[2],closable: false, func:'doSearchList(1,"xslwList","getXslwList.action")'},
						{id:'toolbarPlugin4',title:'学术著作',html:jcTabs[3],closable: false, func:'doSearchList(1,"xszzList","getXszzList.action")'},
						{id:'toolbarPlugin5',title:'知识产权',html:jcTabs[4],closable: false, func:'doSearchList(1,"zscqList","getZscqList.action")'},
						{id:'toolbarPlugin6',title:'获奖成果',html:jcTabs[5],closable: false, func:'doSearchList(1,"hjcgList","getHjcgList.action")'},
						{id:'toolbarPlugin7',title:'薪酬待遇',html:jcTabs[6],closable: false, func:'doSearchList(1,"xcdyList","getXcdyList.action")'}
			        ]
			    });  
			}
		});

增加一个标识loaded后，问题终于解决。