非跨域情况下iframe 高度自适应的问题解决（一）

最新推荐文章于 2025-05-18 13:16:54 发布

weixin_30698297

最新推荐文章于 2025-05-18 13:16:54 发布

阅读量182

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chaoyueqi/p/10020137.html

本文深入探讨iframe高度自适应的实现方法，包括问题背景、注意事项、自适应函数代码、父级页面嵌套子iframe方式及调用方法。适用于解决网页中iframe内容高度动态变化导致的布局问题。

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

从开始接触iframe，就总是各种坑，现在就部分内容做一个简要的记录总结。

iframe 高度自适应的问题

1.问题背景：在默认情况下，iframe标签有一个约150px的默认高度，如果不主动设置iframe的高度，iframe的高度是不会由内容撑开的，而是超出滚动。因此，就涉及到了动态设置iframe高度即iframe高度自适应的问题。

2.注意：涉及到iframe，一定要放到服务器运行打开，本地运行会报跨域的错误

3.iframe自适应函数

/**
* @param ifm：原生方法获取的iframe对象
* iframeing：是不传参数时，默认的iframe的id和name
*/
function iFrameHeight(ifm) {
    ifm = ifm || document.getElementById("iframeing");
    var subWeb = document.frames ? document.frames["iframeing"].document : ifm.contentDocument;
    if (ifm != null && subWeb != null) {
         ifm.height = subWeb.body.scrollHeight;
    }
}

4.父级页面嵌套子iframe页面的方式

<div class="main">
    <iframe src="" name="iframeing" id="iframeing" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" width="100%" height="" style="vertical-align:bottom">
    </iframe>
</div>

5.调用方法
将函数iFrameHeight写在父子页面均引用的公共js里，在父页面调用时：

$('#iframeing').load(function() {
    iFrameHeight();
});

点击切换导航列表，iframe的src被重新赋值，会自动调用iframe的load方法，而不需要再重新写一次。
注意：load方法只是子iframe页面的dom结构加载完调用的方法，相当于子页面的$(document).ready(function() {})里面调用的方法。所以，当子iframe页面的数据是异步加载出来的，或者是有点击按钮的切换显示隐藏导致页面高度变化的，都需要在其对应的位置调用该函数iFrameHeight

6.在子页面调用iFrameHeight：

//第一步：获取父级页面的iframe节点
var parentIfr = window.parent.document.getElementById("iframeing");
//第二步：调用函数
iFrameHeight(parentIfr);

至此，当不涉及跨域问题时，已经可以解决iframe的高度自适应的问题了。

转载于:https://www.cnblogs.com/chaoyueqi/p/10020137.html