父页面iframe高度自动适应子页面iframe高度

最新推荐文章于 2023-08-22 09:18:28 发布

原创最新推荐文章于 2023-08-22 09:18:28 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#iframe #父iframe #子iframe #高度自适应

js 专栏收录该内容

50 篇文章

订阅专栏

本文介绍了一种通过JavaScript实现iframe自适应高度的方法。该方法能够根据子页面的内容自动调整iframe的高度，确保显示完整且不浪费空间。同时提供了一个用于同步调整父页面中多个iframe高度的函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//iframe自适应高度
function getHeight(id, name) {
document.documentElement.scrollTop = 0;
var ifm = document.getElementById(id);
var subWeb = document.frames ? document.frames[name].document :

ifm.contentDocument;

if (ifm != null && subWeb != null) {
ifm.height = subWeb.body.scrollHeight;

}
initParentHeight(); //这个是再初始化父页面的iframe的高度
}
function initParentHeight() //初始化父页面的iframe的高度
{
var div = window.parent.document.getElementById('mainFrame');
div.style.height=window.document.body.scrollHeight||window.document.body.offsetHeight+5;

}