Jquery tab外掛程式wdScrollTab 在chrome中出現不相容的問題

標籤：jquery   wdscrolltab   

先貼上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後，問題終於解決。

Jquery tab外掛程式wdScrollTab 在chrome中出現不相容的問題