easyui tabs 使用iframe 出现两个垂直滚动条解决方法

拼搏现实的明天。 2021-08-26 12:14 364阅读 0赞

最近在使用easyui-tabs加iframe时，出现了两个垂直滚动条的现象，如下图所示

![两个垂直滚动条的效果][SouthEast]  
  
前端代码如下：

<div id="infoDlg" class="easyui-dialog" data-options="closed:true,width:700,height:400,title:'案件信息',buttons:'#infobtns',onClose:CloseAllTab">
            <div id="infotabs" class="easyui-tabs" data-options="fit:true" >
            </div>
    </div>

向tabs中添加tab的js代码如下所示：

function ShowInfo() {
        var row = $('#reusegrid').datagrid('getSelected');
        if (row) {
            var caseid = row.CaseId;
            var ckurl = '/Business/InfoBeforeToreView?id=' + caseid;
            AddTab(ckurl, "拆前信息",'infotabs');
            var reuseUrl = '/Reuse/ViewReuseInfos?id=' + row.Id;
            AddTab(reuseUrl, "利用信息",'infotabs');
            $('#infoDlg').dialog('open');
        }
        else {
            $.messager.alert("错误","请先选择要查看信息的记录","error");
        }
    }
    function AddTab(url, title,target) {
        //存在，更新数据
        if ($('#'+target).tabs('exists', title)) {
            $('#' + target).tabs('select', title);
            var selTab = $('#tabs').tabs('getSelected', title);
            $('#' + target).tabs('update', {
                tab: selTab,
                options: {
                    content:createFrame(url)
                }
            })
        }
        else {
            $('#' + target).tabs('add', {
                title: title,
                content: createFrame(url),
                closable:true
            })
        }
    }
    function createFrame(url) {
        var s = '<iframe scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>';
        return s;
    }

根据代码可以猜测，出现两个滚动条，其中一个肯定是iframe中内容过多出现的滚动条，这个也正是我们实际所需要的滚动条，另外一个滚动条不知道到是如何出现的，但是猜测可能与easyui-tabs控件本身有关，出现滚动条，可以肯定的是内容超出了高度范围，而我们所熟知的隐藏超出内容的方式就是overflow：hidden的方式来用css控制，根据这个想法，查看此时的DOM文档结构，如下图

![文档结构][SouthEast 1]  
  
可以看到，每一个tab其实对应着一个class为panel的div，而panel中的内容显示在class为panel-body的div中，可以尝试直接在DOM上的这个panel-body上添加一个css，overflow:hidden,然后查看效果，如图

![直接在DOM上修改][DOM]  
  
修改后可以直接看到结果，如下，可以看到已经达到想要的结果

![修改后的结果][SouthEast 2]  
  
由于我们所能知道的DOM结构为我们设置的tabs的id即‘infotabs’，观察文档的DOM，需要找到对应的panel-body，最终使用CSS如下，即可达到效果

<style type="text/css">
            #infotabs .tabs-panels>.panel>.panel-body {  
        overflow: hidden;  
        } 
    </style>

[SouthEast]: /images/20210728/9b857255ab1b4898b11e92e1bbc0aa74.png
[SouthEast 1]: /images/20210728/2f2069fb5007413fac81766c53fd04e7.png
[DOM]: /images/20210728/a62cb3f591e3448f883cbc7af985f2d8.png
[SouthEast 2]: /images/20210728/fda88b35e7fe45ae9c7792aca3012ff6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，364人围观）

还没有评论，来说两句吧...

相关阅读

相关 Freemarker中 div 嵌入、包含、include iframe 保留垂直滚动条实践

摘要：今天在做自己的博客项目时，遇到了在freemarker页面的div里面嵌入iframe，以用来显示阿里的druid监控管理页面，现在把解决过程记录下。一：首先看下实际

蔚落/ 2024年02月18日 21:27/ 0 赞/ 4 阅读

相关 html iframe禁止横向滑动_frameset, iframe, frame框架页面出现横向滚动条bug的隐藏方法...

使用框架(无论是frameset、frame、iframe)嵌套网页的时候，如果子网页的高度超过了预先设定的高度，会出现滚动条，也就是尺寸溢出，一般来说如果高度超了就出现垂直滚

╰+攻爆jí腚メ/ 2022年12月31日 10:20/ 0 赞/ 146 阅读

相关 jquery.easyui.tabs 中的首个tabs被最后tabs覆盖的问题解决方法

jquery.easyui.tabs 中的首个tabs被最后tabs覆盖的问题解决方法参考文章： [（1）jquery.easyui.tabs 中的首个tabs被最后ta

一时失言乱红尘/ 2022年08月28日 08:54/ 0 赞/ 116 阅读

相关 LinearLayout 垂直滚动条

activity中经常只是一个LinearLayout，但这样的话，如果activity内容超过一屏，无法滚动查看下面的内容。这时只需在外面嵌套一个ScrollView就可

系统管理员/ 2022年08月09日 15:56/ 0 赞/ 180 阅读

相关解决easyui-tabs中使用iframe时出现两个垂直滚动条

最近在使用easyui-tabs加iframe时，出现了两个垂直滚动条的现象，如下图所示 ![两个垂直滚动条的效果][SouthEast] 前端代码如下： <

淩亂°似流年/ 2022年06月17日 06:39/ 0 赞/ 162 阅读

相关 ios上iFrame滚动条失效

在做公户号的时候，有一个页面引入了IFrame。然后出现了一个很尴尬的问题，iframe不出现滚动条，而且在屏幕高度以外的内容都被截掉了。百度之后，找到了解决方案，亲测可行

短命女/ 2022年05月27日 09:50/ 0 赞/ 157 阅读

相关 iframe的滚动条问题：显示/隐藏滚动条

1. XHTML 1.0 Transitional 标准不能显示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

冷不防/ 2022年02月15日 15:29/ 0 赞/ 428 阅读

相关第48天：垂直滚动条

垂直滚动条 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta c

朴灿烈づ我的快乐病毒、/ 2022年02月09日 20:51/ 0 赞/ 220 阅读

相关 easyui tabs 使用iframe 出现两个垂直滚动条解决方法

最近在使用easyui-tabs加iframe时，出现了两个垂直滚动条的现象，如下图所示 ![两个垂直滚动条的效果][SouthEast] 前端代码如下：

拼搏现实的明天。/ 2021年08月26日 12:14/ 0 赞/ 365 阅读

相关 easyUI中tabs使用iframe的方式加载选项卡

使用了easyUi，发现panel组件的href比较坑人，不像extJs的html属性那样。今天遇到了tabs添加页签时需要使用iframe展示的问题，总结如下： f

向右看齐/ 2021年06月24日 14:00/ 0 赞/ 645 阅读