在IE11中easyui中一键打开多个tags时页面不显示的问题

最近,在工作中遇到了一个前端的问题:点击按钮弹出五个tags页面,但是在IE10中,除了最右边的tags正常外,其余四个页面都出现了空白,但是这个问题在IE8上面是没有的;
实现步骤:1.使用for循环生成tag页面,代码大致如下:

for(var i = 0;i < 5;i++) {
	//TODO 异步发送请求并生成tabs
}

2.异步发送请求并声称tabs代码大致如下

$cf.ajax({
	url:XXX,
	data:loginData,
	onSuccess:function(data){
		//TODO 生成TABS
	}
});

3.生成tabs代码大致如下:

tabObj.tabs('add',{
	id : id,
	title : text,
	selected: true,
	closable :true,
	content:'<iframe name="'+ text+ '" src="'+url+'" width="100%" height="900px" frameborder="0" scrolling="auth"></iframe>'
});

因为我工作环境升级浏览器非常麻烦,且本地启动基本不可能,所以只能先猜:
这个现象只在IE11或者谷歌最新版有,而在IE8或者谷歌老板浏览器上没有,所有我刚开始觉得应该是异步导致的,于是在请求里加入async:false,一测没有效果;接着我适用于按时,让请求一个一个来,还是不行,而且还会造成浏览器很卡。
后面我终于找到了一台可以测试的机器,于是我用开发者工具查看,发现请求返回都是没有问题的,所有问题只能是前端页面构建上了。
我查看页面各个节点的情况,发现页面不显示都是因为width和height为0导致,再看看代码这些节点定义的width都是为100%。

最终在网上找到了解决办法:
在tags页面的每一个出现iframe的地方网上找,第一个出现width:100或height:100%的div中后面加上data-option="fit:true"如下

<div class="easyui-tabs" style="width:100%;height:100%" data-option="fit:true">
	<div style="width:100%;height:100%">
		<iframe style="width:100%;height:100%"></iframe>
	</div>
</div>
发布了12 篇原创文章 · 获赞 1 · 访问量 139

猜你喜欢

转载自blog.csdn.net/u010574271/article/details/103809373