easyui tab 加载iframe 高度问题(解决iframe右侧总出两个滚条方法)

最新推荐文章于 2024-09-23 15:25:43 发布

王同学爱学习

最新推荐文章于 2024-09-23 15:25:43 发布

阅读量5.1k

点赞数 2

分类专栏：前端 EasyUi 文章标签： html easyui 浏览器 easyui tab iframe右侧总出两个滚条方法

本文链接：https://blog.csdn.net/IsITMan/article/details/53083640

版权

前端同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

EasyUi

1 篇文章 0 订阅

订阅专栏

问题描述：

浏览器兼容性导致右侧出现双滚动条。

html主要代码：

<div data-options="region:'center',border:false" style="background:#eee;">
    	<div id="tabsBar" class="easyui-tabs" fit="true">
    	</div>
    </div>

js主要代码：

function addTabPage(tabName,tabUrl){
			if($("#tabsBar").tabs("exists",tabName)){
				$("#tabsBar").tabs("select",tabName);
			}else{
				$("#tabsBar").tabs("add",{
				    title:tabName, 
				    content:'<iframe scrolling="auto" frameborder="0"  src="' + tabUrl
						+ '" style="width:100%;height:100%;"></iframe>',
				    closable:true,
				    tools:[{
				        iconCls:"icon-mini-refresh",    
				        handler:function(){    
				        	$('#tabsBar').tabs('getSelected').find("iframe")[0]
				        		.contentWindow.location.reload(true); 
				        }
				    }]    
				});
			}
		}

一、亲自验证方法（推荐）：

解决iframe右侧总出两个滚条方法

#tabsBar .tabs-panels>.panel>.panel-body {
overflow: hidden;
}

二、源自网络解决方法：

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

有其他更好的解决方法欢迎留言。