本文介绍了一种使用JavaScript动态调整iframe元素高度的方法，确保了主iframe与左侧导航iframe的高度一致，并能随内容变化自动调整。
js代码：
function setIframeHeight() {
var dHeight = 502; //基础高度
var main = document.getElementById("mainIframe");
var left = document.getElementById("leftIframe");
//var leftFrame = document.getElementsByName("left")[0];
var cHeight = main.contentWindow.document.body.scrollHeight; //当前高度
var sHeight = 0; //准备设置的高度值
if (cHeight <= dHeight) {
sHeight = dHeight + "px";
} else {
sHeight = cHeight + "px";
}
main.style.height = sHeight;
left.style.height = sHeight;
if (left.contentWindow.document.getElementById("leftFrameCont")) {
left.contentWindow.document.getElementById("leftFrameCont").style.height = sHeight;
}
}
var dHeight = 502; //基础高度
var main = document.getElementById("mainIframe");
var left = document.getElementById("leftIframe");
//var leftFrame = document.getElementsByName("left")[0];
var cHeight = main.contentWindow.document.body.scrollHeight; //当前高度
var sHeight = 0; //准备设置的高度值
if (cHeight <= dHeight) {
sHeight = dHeight + "px";
} else {
sHeight = cHeight + "px";
}
main.style.height = sHeight;
left.style.height = sHeight;
if (left.contentWindow.document.getElementById("leftFrameCont")) {
left.contentWindow.document.getElementById("leftFrameCont").style.height = sHeight;
}
}
index.jsp部分页面代码：
<div id="content_bottom2" style="width:auto;">
<iframe name="left" class="vipIf_left" scrolling="no" marginwidth="0px" frameborder="0" src="left.jsp" id="leftIframe"></iframe>
<iframe name="main" class="vipIf_right" frameborder="0" src="main.jsp" onload="setIframeHeight();" id="mainIframe"></iframe>
</div>
<iframe name="left" class="vipIf_left" scrolling="no" marginwidth="0px" frameborder="0" src="left.jsp" id="leftIframe"></iframe>
<iframe name="main" class="vipIf_right" frameborder="0" src="main.jsp" onload="setIframeHeight();" id="mainIframe"></iframe>
</div>
left.jsp部分页面代码：
<body> <div class="cont_left" id="leftFrameCont"> 
</div></body>
扫一扫
763
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
