iframe高度随内容变化

加载主页面时，主页面中框架高度由框架中的内容决定。
框架里有一树形菜单，当框架中的菜单展开或叠起时要求框架高度随之变化。
要求兼容IE、FF等主流浏览器。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

主页面中：
<script>
function autoResize() {
try {     document.all["resultFrame"].style.height=resultFrame.document.body.scrollHeight;
}catch(e){}
}
</script><iframe src="iframetest.jsp" scrolling="no" name="resultFrame" frameborder="0"
style="height:expression(1);aho:expression(autoResize());"></iframe>这个在FF中不兼容...
main.html<html>
<head>
<script type="text/javascript">
//iframe自适应高度的函数
var oTime = null;
function resize() {
if (oTime) {
clearTimeout(oTime);
}
oTime = setTimeout(reset, 200);
} //iframe自适应高度的函数
function reset() {
var frame = document.getElementById("iframe");
var outHeight = frame.offsetHeight;
var inHeight = frame.contentWindow.document.body.scrollHeight;
if (outHeight < inHeight) {
frame.style.height = (inHeight + 10) + "px";
}else if(inHeight>650){
frame.style.height=(inHeight + 10) + "px";
}else{
frame.style.height="750px";
}
}
</script>
</head>
<body>
<div id="mainContent">
<iframe src="test.html" id="iframe" name="iframe" frameborder="0"
scrolling="no" onreadystatechange="resize()" onload="resize()"></iframe>
</div>
</body>
</html>test.html
<html>
<head>
</head>
<body>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
aaaaaaa<br/>
</body>
</html>
主页面中：
var getFFVersion = navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
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){
    pTar.style.display="block"
    if(pTar.contentDocument && pTar.contentDocument.body.offsetHeight){
      pTar.height = pTar.contentDocument.body.offsetHeight+FFextraHeight;
    } else if(pTar.Document && pTar.Document.body.scrollHeight){
      pTar.height = pTar.Document.body.scrollHeight;
    }
  }
}<iframe id="myTestFrameID" onload="javascript:{dyniframesize('myTestFrameID');}"
marginwidth="0" marginheight="0" frameborder="0" scrolling="no" src="iframetest.jsp">
</iframe>这个虽然在FF中兼容，但是框架中的菜单展开或叠起时框架的高度未发生变化...
ie6和ff2测试通过，其他的未测试。如果你的树有根节点，如果使用div布局清除浮动后，可以考虑使用根节点的offsetHeighttest.html
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=gb2312;" />
  </head>
  <body>
  <iframe src="content.html" onload="addEvt(this)"  frameborder="0" style="border:solid 1px black;" marginheight="0" marginwidth="0"></iframe>
<script type="text/javascript">
function addEvt(ifr){
  var doc=ifr.contentWindow.document;
  doc.onclick=function(){
    ifr.style.height=(document.all?doc.body.scrollHeight:doc.body.offsetHeight)+'px';
    //ifr.style.height=doc.body.firstChild.offsetHeight;//有根节点可以使用根节点，兼容性比较好，opera，safari，google的浏览器都可以兼容，如果使用body.offsetHeight只在ff下有效果
  }
  ifr.style.height=doc.body.scrollHeight;
}
</script></body>
</html>content.html，没跟节点的
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=gb2312;" />
  <body style="height:auto">
  <div>
    <div onclick="this.nextSibling.style.display=this.nextSibling.style.display=='none'?'block':'none'">展开/收缩内容部分</div><div>内容1内容1内容1内容1<br />内容1内容1内容1内容1<br />内容1内容1内容1内容1<br />内容1内容1内容1内容1</div>
  </div><br />
  <div>
    <div onclick="this.nextSibling.style.display=this.nextSibling.style.display=='none'?'block':'none'">展开/收缩内容部分</div><div>内容1内容1内容1内容1<br />内容1内容1内容1内容1<br />内容1内容1内容1内容1<br />内容1内容1内容1内容1</div>
  </div><br />
  <div>
    <div onclick="this.nextSibling.style.display=this.nextSibling.style.display=='none'?'block':'none'">展开/收缩内容部分</div><div>内容1内容1内容1内容1<br />内容1内容1内容1内容1<br />内容1内容1内容1内容1<br />内容1内容1内容1内容1</div>
  </div>
</body>
</html>
content.html，有根节点并且是body的唯一子节点
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=gb2312;" />
  <body style="height:auto"><div id="dvMain">
  <div>
    <div onclick="this.nextSibling.style.display=this.nextSibling.style.display=='none'?'block':'none'">展开/收缩内容部分</div><div>内容1内容1内容1内容1<br />内容1内容1内容1内容1<br />内容1内容1内容1内容1<br />内容1内容1内容1内容1</div>
  </div><br />
  <div>
    <div onclick="this.nextSibling.style.display=this.nextSibling.style.display=='none'?'block':'none'">展开/收缩内容部分</div><div>内容1内容1内容1内容1<br />内容1内容1内容1内容1<br />内容1内容1内容1内容1<br />内容1内容1内容1内容1</div>
  </div><br />
  <div>
    <div onclick="this.nextSibling.style.display=this.nextSibling.style.display=='none'?'block':'none'">展开/收缩内容部分</div><div>内容1内容1内容1内容1<br />内容1内容1内容1内容1<br />内容1内容1内容1内容1<br />内容1内容1内容1内容1</div>
  </div></div>
</body>
</html>
主界面写一个函数，功能：获取iframe中HTML或者BODY的offsetHeight，然后赋值给这个iframe的style.height子界面载入完调用一次这个函数。
子界面的树在展开或者收起的时候，调用一下主界面的这个函数，重新调整一次高度。