做项目的时候遇到了iframe嵌套iframe 需要页面高度跟随页面内容多少来显示。而且还不能使用iframe自带的scrolling滚动条。
刚开始就算父iframe高度 计算错误,导致页面显示只显示一半的内容。
解决方法是 :
在iframe子页面加载完成时首先将iframe的高度值设置为0(清除上一个子页面的高度影响) 然后通过document.body.scrollHeight获取该子页面的高度值 来设置iframe的高度值
<iframe id="main" name="main" width="100%" height="100%" src="home.html" onload="iFrameHeight()" frameborder="0" scrolling="no" ></iframe>
function iFrameHeight(){
var ifm= document.getElementById("main");
var subWeb = document.frames ? document.frames["main"].document : ifm.contentDocument;
if(ifm != null && subWeb != null) {
$("#main").height(0);//此处关键处 莫忘 清除上一个子页面高度的影响
$("#main").height(subWeb.body.scrollHeight);
}
}