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

文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: iframeiframe 自动调整自动调整
相关日志: