iframe根据子界面高度自适应的情况--子界面table异步

最近笔者遇到一个问题,需要在后台管理系统界面中右侧区域iframe根据子界面的高度进行自适应.开始用的方法是这样的

//set iframe height
// 计算页面的实际高度，iframe自适应会用到
window.onload=function(){
	  function calcPageHeight(doc) {
	      var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight,doc.body.offsetHeight)
	      var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight,doc.body.offsetHeight)
	      var height  = Math.max(cHeight, sHeight);
	      return height
	  }
	  //根据ID获取iframe对象
	  var ifr = document.getElementById('mainFrame')
	  ifr.onload = function() {
	  //解决打开高度太高的页面后再打开高度较小页面滚动条不收缩
	  	  ifr.style.height='0px';
	      var iDoc = ifr.contentDocument || ifr.document
	      var height = calcPageHeight(iDoc)
	      console.log(height)
	      if(height < 850){
	      	height = 850;
	      }
	      ifr.style.height = height + 'px'
	  }
	
}

但是后来发现部分界面,尤其是带有table的界面显示不全,iframe获取的高度比实际的要小.排查原因后发现,是界面在加载时,table的内容onload时没有获取到全部内容的高度,tbody为空.所以高度变小了.最后在同事的帮助下,通过以下代码解决了这个问题

//set iframe height
// 计算页面的实际高度，iframe自适应会用到
function calcPageHeight(doc) {
    var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight,doc.body.offsetHeight)
    var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight,doc.body.offsetHeight)
    var height  = Math.max(cHeight, sHeight);
    return height
}

//根据ID获取iframe对象
window.onload=function(){
	var ifr = document.getElementById('mainFrame');
	ifr.onload=function(){
		ifr.style.height='0px';
		
	    setTimeout(function(){	//延时获取iframe里面的内容,是datatable数据加载完毕再获取dom里面 的元素高度
	    	var iDoc = ifr.contentDocument || ifr.document
		    var height =calcPageHeight(iDoc);
		    console.log(height);
		    if(height < 850){
		    	height = 850;
		    }
	    	ifr.style.height = height + 'px'
	    },1000);
	} 
}

具体逻辑是,需要延迟的获取iframe里面dom元素的高度
通过改进后,界面都能显示完整了.以此记录以下,希望能帮助大家