2025年解决iframe高度自适应

编程汇总 • 2025-07-15 07:21 • 阅读 84

解决iframe高度自适应

原因

第一种方法

第二种方法

原因

iframe的高度不会随着页面高度的变化而变化，可能会导致页面显示不全，或者页面下方有空白的问题。

第一种方法

这个方式更适用于嵌套的页面，当嵌套多个iframe时，比如左侧有个侧边栏，右侧是个大的iframe，这个大的iframe又嵌套了一层：中间是iframe，但是右侧又有个侧边栏，这时候不想让iframe单独滑动（避免页面出现两个滚动条），而是想整个页面一起滑动时，用这个方法。

html代码：注意一定要写height=‘100%’ scrolling=‘no’ width=’100%’
否则iframe会自己滑动

js代码：

try { 



var timer;

$("#form-iframe").load(function () { 



if (timer) { 



clearInterval(timer);

}

//pre_height用于记录上次检查时body的高度

//mainheight用于获取本次检查时body的高度，并赋予iframe的高度

var mainheight, pre_height;

var frame = $(this);

timer = setInterval(function () { 



mainheight = $(document.body).height() + 10;

if (mainheight != pre_height) { 



pre_height = mainheight;

frame.height(Math.max(mainheight, 350));

}

}, 500);//每0.5秒检查一次

});

} catch (e) { 



}

第二种方法

这个方法更简单些，适用于左侧有个侧边栏，右侧是iframe，并且iframe可以自己滑动，只在页面高度变化时重新赋值即可。

html代码：

js代码：

  //根据ID获取iframe对象

var org = $("#form-iframe")

org.onload = function () { 



//解决打开高度太高的页面后再打开高度较小页面滚动条不收缩

org.style.height = '0px';

var iDoc = org.contentDocument || org.document

var height = calcPageHeight(iDoc)

if (height < 850) { 



height = 850;

}

org.style(height, height + 'px')

}

两种方法我都用了，亲测好用！！！

2025年解决iframe高度自适应

解决iframe高度自适应

原因

第一种方法

第二种方法

相关推荐