easyui tab 加载iframe 高度问题

时间 2019-11-10

标签 easyui tab 加载 iframe 高度问题栏目 HTML 繁體版

原文原文链接

其实按网上搜的结果，easyui 有个data-options属性是fit:true. 加上他以后会使得自适应父类的宽高。html

加上以后，发现个问题，当刷新tab内容的时候高度是对的，可是新建tab的时候高度仍是没自适应。下面解决办法是，新建以后再update下当前选中的tab.简单暴力。立竿见影：ui

// 新建tab
function open1(plugin,route){
    if ($('#tt').tabs('exists',plugin)){
        $('#tt').tabs('select', plugin);
        // tab刷新内容
        var tab = $('#tt').tabs('getSelected');
        $("#tt").tabs('update', {
            tab: tab,
            options: {
                title: plugin,
                content: '<iframe scrolling="auto" frameborder="0"  src="'+route+'" style="width:100%;height:100%;"></iframe>',
                closable: true,
                selected:true
            }
        });
    } else {
        //var content = '<iframe scrolling="auto" frameborder="0"  src="'+route+'" style="width:100%;height:100%;"></iframe>';

        $('#tt').tabs('add',{});

        // tab刷新内容 fix 自适应高度
        var tab = $('#tt').tabs('getSelected');
        $("#tt").tabs('update', {
            tab: tab,
            options: {
                title: plugin,
                content: '<iframe scrolling="auto" frameborder="0"  src="'+route+'" style="width:100%;height:100%;"></iframe>',
                closable: true,
                selected:true
            }
        });
    }
}

以后又发现，在iframe右侧总出两个滚条。网上搜了个这个解决办法。加上以后果真就剩下一个iframe本身的滚条了。spa

<!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">