iframe高度自动调整(通过IE,firefox,opera测试)

1.index.html
<iframe id="mainIframe" scrolling="no" frameborder="0" width="100%" src="a.html"></iframe>
<a href="#" onclick="page('a.html')">a页面</a><a href="#" onclick="page('b.html')">b页面</a>

2 a.html //内嵌页面
<script language="javascript">
changeHight();
</script>

3. b.html //内嵌页面
<script language="javascript">
changeHight();
</script>

4. page.js
function changeHight(){
var iFrm = parent.document.getElementById("mainIframe");
var subWeb = iFrm.contentDocument;
if(subWeb){
if (subWeb.body.scrollHeight>480)
iFrm.height = subWeb.body.scrollHeight+20;
else
iFrm.height=500;
}
if(top.document.frames["mainIframe"].document && window.document.body.scrollHeight!="0"){
parent.document.getElementById("mainIframe").style.height=window.document.body.scrollHeight;
}
if(top.document.frames["mainIframe"].document && window.document.body.scrollHeight=="0"){
parent.document.getElementById("mainIframe").style.height=500;
}
}

function page(page){
document.getElementById("mainIframe").src=page;
}

造成IE,FireFox,Opera中Iframe显示差异原因在于
1.iframe在FireFox中取法为parent.document.getElementById("mainIframe").contentDocument,而在ie,opera中为parent.document.getElementById("mainIframe").document
2.当页面无滚动时，window.document.body.scrollHeight在IE中能取到，fireFox和Opera中取不到。
posted on 2009-04-21 14:05 software5168 阅读(352) 评论(0) 编辑 收藏 所属分类: Java學習