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中取不到。