父頁面 :
父頁面有一個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');
}