IFrame自动适应内容高度，不出现滚动条

最新推荐文章于 2024-07-24 10:26:30 发布

原创最新推荐文章于 2024-07-24 10:26:30 发布 · 1.6k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#Opera

收录于

本文介绍了一种使IFRAME能根据其内容自动调整高度的方法。通过使用JavaScript函数SetCwinHeight，可以确保IFRAME的高度始终与内部文档的高度保持一致。

在页面中想要插入一个IFRAME,但需要这个Iframe随着Iframe里的内容高度自动调整高度，这个时候方法有很多种，在这里只给大家介绍其中一种方法，也是比较实用方便的方法。
代码:
将下面JS代码放在<head></head>之间:

<script type="text/javascript">
function SetCwinHeight(iframeObj){
if (document.getElementById){
if (iframeObj && !window.opera){
if (iframeObj.contentDocument && iframeObj.contentDocument.body.offsetHeight){
iframeObj.height = iframeObj.contentDocument.body.offsetHeight;
}else if(document.frames[iframeObj.name].document && document.frames[iframeObj.name].document.body.scrollHeight){
iframeObj.height = document.frames[iframeObj.name].document.body.scrollHeight;
}
}
}
}
</script>

iFrame示例代码为:
<iframe frameborder="0" scrolling="no" name="right" onload="SetCwinHeight(this)" src="页面" width="800">