父页面 :
父页面有一个id为easyIframe的iframe,iframe里面是一个datagrid
<div class="easyui-layout" id="myLayout" data-options="fit:true,border:false" >
<div data-options="region: 'center', border: false,title: '',iconCls:''" >
<div>
<iframe id="easyIframe" src="queryQuestionNorm?dataType=<s:property value='dataType'/>"
frameborder="0" scrolling="auto" height="170px" width="100%"></iframe>
<div style="text-align: center" id="btnDiv">
<a onClick="appendTextareas();" href="javascript:void(0);" class="easyui-linkbutton" data-
options="plain: true, iconCls: 'icon-add'">添加定额</a>
</div>
</div>
父页面js :
/*添加定额按钮点击事件*/
function appendTextareas(){
$('#easyIframe')[0].contentWindow.appendTextareas();
}
子页面 :
<div class="easyui-layout" data-options="fit: true" id="iframeLayout">
<div data-options="region: 'center', border: false,fit: false,title: '',iconCls:''" id="centerLayout">
<table id="myTabel"></table>
</div>
</div>
子页面 js:
$(function() {
$('#myTabel').datagrid({
......
onLoadSuccess:function(data){
setHeight();//根据子页面的datagrid的实际高度,来设置父页面iframe的高度
}
});
});
/**
* 不让datagrid出现滚动条,自适应高度
* @returns
*/
function setHeight() {
var height = initIframeHeight();
//重置父页面的layout
resizeHeight(height);
}
/**
* 设置子页面的layout的center的高度,以及设置子页面iframe所在父页面的parent元素的高度
* @returns
*/
function initIframeHeight(){
//获取iframe对象
var $iframe = window.parent.$('#easyIframe');
//获取iframe的实际高度
var height = getIframeHeight($iframe[0].contentWindow.document);
//获取iframe所在父元素里面的其他元素的高度
var height2 = window.parent.$('#btnDiv').height();
//设置iframe的高度为子页面不出现滚动条的高度
$iframe.height(height);
//子页面iframe里面设置layout的center高度
$('#centerLayout').height(height);
//重置子页面iframe的layout
$('#iframeLayout').layout('resize');
//设置父页面iframe的parent父元素的高度
$iframe.parent().height(height + height2);
return height;
}
/**
* 获取iframe不出现滚动条的实际高度
* @param doc
* @returns
*/
function getIframeHeight(doc) {
var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight);
var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight);
//获取iframe的原有的body的高度
var height = Math.max(cHeight, sHeight)
//返回值为iframe的body的高度和datagrid不出现滚动条需要额外加上的高度
return height+getDatagridTableHeight();
}
/**
* 获取datagrid的实际高度(不出现滚动条的高度)
* @param doc
* @returns
*/
function getDatagridTableHeight(){
//这个不是滚动条所在页面,不是datagrid的实际高度
//var datagridHeight = $('#myTabel').parents('.datagrid-view').height();
//这个是datagrid的实际高度
var datagridHeight = $('#myTabel').parents('.datagrid-view').find('.datagrid-view2').find(".datagrid-btable").height();
//datagrid-btable是没有包括datagrid的头部的,这里把头部的高度加上去,头部高度是25
datagridHeight += 25;
var layoutHeight = $('#myTabel').parents('.layout-body').height();//获取中部center的高度
var subHeight = 0;//默认不出现滚动条,即额外增加的高度为0
if(layoutHeight < datagridHeight){
//如果小于,即出现了滚动条,此时高度返回为两者之差,即中部center还需要增加这么高的高度,才不会出现滚动条
subHeight = datagridHeight - layoutHeight;//不出现滚动条需额外增加的高度
}else{
//layout高度高了,改为和datagrid一致
//subHeight = layoutHeight - datagridHeight;
//暂不处理,如果没出现滚动条,就保持原高度,不改变center的高度为datagrid的高度
}
return subHeight;
}
/**
*重置父页面的layout
*/
function resizeHeight(height){
window.parent.$('#myLayout').layout('resize');
}