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

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

前端代码如下：

<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文档结构，如下图

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

修改后可以直接看到结果，如下，可以看到已经达到想要的结果

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

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

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

android 垂直自动滚动条,Android实现Activity水平和垂直滚动条的方法
本文实例讲述了Android实现Activity水平和垂直滚动条的方法.分享给大家供大家参考,具体如下: android:layout_width="match_parent" a ...
英雄无敌6服务器在哪个文件夹,Win7系统无法运行英雄无敌6的两种原因和解决方法...
英雄无敌6作为一款策略模拟类游戏,深受高端玩家的喜爱.但最近有Win7旗舰版系统用户在玩英雄无敌6时,却出现了无法运行的情况,重启好多次还是一样,不太清楚是哪里出问题,网上相关解决方案也比较少,针对此 ...
更换mysql-connector-java-6.0.5jar包后程序出现的两个异常及解决方法
更换mysql-connector-java-6.0.5jar包后程序出现的两个异常及解决方法参考文章: (1)更换mysql-connector-java-6.0.5jar包后程序出现的两个异常及 ...
win7 计算机名称 ip6,Win7系统提示ipv6无网络访问权限的两种原因及解决方法
Win7系统提示ipv6无网络访问权限,导致无法上网,这该如何解决呢?ipv6无网络访问权限的原因有很多种,针对此问题,下面脚本之家的教大家解决ipv6无网络访问权限的问题,大家一起来看看吧. 故障原 ...
win10去除管理员账户密码后出现两个账号的解决方法
win10去除管理员账户密码后出现两个账号的解决方法一.情况 win10去除密码后出现两个账号,一个是本地管理员账号,也就是administrator账号,超级管理员,第二个也就是我们登录的远程账号 ...
win10改计算机名后开机有两个用户,win10系统取消开机密码后出现两个账户的解决方法...
很多小伙伴都遇到过win10系统取消开机密码后出现两个账户的困惑吧,一些朋友看过网上零散的win10系统取消开机密码后出现两个账户的处理方法,并没有完完全全明白win10系统取消开机密码后出现两个账户 ...
win10与linux 开机黑屏,win10系统开机黑屏进不去的两种原因及解决方法
win10电脑用久了总会会遇到某些故章,较为普遍的属于黑屏了.黑屏的故障就可以分为多种状况,比如开机黑屏,只有鼠标出现.或者是驱动不兼容导致电脑黑屏等,造成黑屏的原因也有很多,所以不同情况,修复方法也 ...
【Win10】系统，手动设置静态IP后出现两个IPv4地址解决方法
@[TOC][Win10]系统,手动设置静态IP后出现两个IPv4地址解决方法 [Win10]系统,手动设置静态IP后出现两个IPv4地址解决方法你好! 这是你第一次使用 Markdown编辑器所 ...
iframe中碰到的问题及解决方法
前言今天在做验证码识别项目的时候,一开始就碰到了一个问题,出了各种各样的报错,研究查询了很久终于解决了,在这里归纳分享一下. 碰到的问题及解决方法在我定位验证码滑块元素的时候一直显示我定位语句错误 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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