easyui tabs content为iframe没有滚动条解决办法
easyui tabs content为iframe时没有出现滚动条，或者无法占满容器的宽度（iframe设置了width：100%），出现这个问题是因为更改过浏览器窗体的大小导致的。
DEMO
<div id="mainPanle" region="center">
<div id="tabs" class="easyui-tabs" border="false"><div title="easyui tab" style="padding:20px;"><h1>easyui tabs content为iframe没有滚动条解决办法</h1></div></div>
网站列表
<ul><li><a href="http://bbs.csdn.net">csdn</a></li></ul>
</div>
<script>
$(document).ready(function () {
$('#mainPanle a').click(function () { addTab($(this).text(), $(this).attr('href')); return false });
function addTab(subtitle, url) {
if (!$('#tabs').tabs('exists', subtitle))
$('#tabs').tabs('add', { title: subtitle, content: '<iframe name="mainFrame" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>', closable: true });
else $('#tabs').tabs('select', subtitle);
}
});
</script>
初始化，没有问题，iframe有滚动条
浏览器窗体缩小，滚动条隐藏
窗体放大，滚动条显示，但是无法占满容器
原因：easyui 给容器设置了overflow:hidden的样式，并且设置了tab body的宽度为初始化的浏览器宽度，父容器是依据浏览器实际宽度来定位。当tab添加好后，更改浏览器窗体可能出现2个问题。
- 当宽度小于初始化宽度就会导致iframe的滚动条隐藏起来
- 如果大于初始化宽度，会导致iframe没有占满整个父容器。
tab body设置了宽度
在添加新tab时重新设置tab body的宽度为auto即可解决浏览器大小更改后iframe没有滚动条或无法占满容器的问题。
function addTab(subtitle, url) {
if (!$('#tabs').tabs('exists', subtitle)) {
$('#tabs').tabs('add', { title: subtitle, content: '<iframe name="mainFrame" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>', closable: true });
$('#tabs').tabs('getSelected').css('width', 'auto'); //重新tab body宽度为auto，如果你上面的添加语句设置了selected为false，注意使用下面注释的这句来获取你的tab
//$('#tabs').tabs('getTab', subtitle).css('width', 'auto');
}
else $('#tabs').tabs('select', subtitle);
}
加支付宝好友偷能量挖...
原创文章，转载请注明出处：easyui tabs content为iframe没有滚动条解决办法