本文介绍如何使用JavaScript动态调整iframe高度，以消除滚动条并实现页面融合。通过检测Firefox和IE浏览器版本，自动计算内容高度并修正显示偏差，确保不同浏览器下内容完整展示且无多余空白。
iframe高度自适应背景
在网页开发中引入iframe后，通常希望隐藏其自带的滚动条，使iframe内容与主页面视觉风格保持一致。为此，开发者常设置 scrolling="no" 属性。然而，若iframe内部内容高度动态变化，固定高度的iframe会出现两种问题：内容过多时底部被遮挡，或内容过少时底部出现大片空白。本文提供一段兼容IE、Netscape及Firefox的JavaScript脚本，用于根据内容自动调整iframe高度。调整宽度的原理类似，此处不再赘述。
核心JavaScript实现
首先，需要在主页面中嵌入以下JavaScript代码：
<script language="Javascript">
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
//extra height in px to add to iframe in FireFox 1.0+ browsers
var FFextraHeight=getFFVersion>=0.1? 16 : 0
function dyniframesize(iframename) {
var pTar = null;
if (document.getElementById){
pTar = document.getElementById(iframename);
}
else{
eval('pTar = ' + iframename + ';');
}
if (pTar && !window.opera){
//begin resizing iframe
pTar.style.display="block"
if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){
//ns6 syntax
pTar.height = pTar.contentDocument.body.offsetHeight+FFextraHeight;
}
else if (pTar.Document && pTar.Document.body.scrollHeight){
//ie5+ syntax
pTar.height = pTar.Document.body.scrollHeight;
}
}
}
</script>
iframe标签配置
接着，在主页面的iframe标签中添加 onload 事件处理：
<iframe id="myTestFrameID"
onload="javascript:{dyniframesize('myTestFrameID');}"
marginwidth=0 marginheight=0 frameborder=0
scrolling=no src="/myiframesrc.php"
width=200 height=100></iframe>