iframe根据子界面高度自适应的情况
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元素的高度
通过改进后,界面都能显示完整了.以此记录以下,希望能帮助大家