iframe自适应高度的多种方法小结

时间:2022-10-27 16:15:23

转自:http://www.jb51.net/article/15780.htm

  不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,总结一下iframe动态调整高度的方法,主要是以下JS函数:

第一种方法:(代码简单,兼容性还可以,先测试下)

function SetWinHeight(obj) {
  var win=obj;
  if (document.getElementById){
    if (win && !window.opera){
      if (win.contentDocument && win.contentDocument.body.offsetHeight)
        win.height = win.contentDocument.body.offsetHeight;
      else if(win.Document && win.Document.body.scrollHeight)
        win.height = win.Document.body.scrollHeight;
    }
  }
}

最后,加入iframe,不能丢掉onload属性,当然了,id也必须也函数中的win匹配

<iframe width="" align="center" height="" id="win" name="win" onload="Javascript:SetWinHeight(this)" 
frameborder="" scrolling="no" src="1.htm"></iframe>

第一种方法:(经典代码 iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试)

<iframe src="http://www.fufuok.com/" id="iframepage" name="iframepage" frameBorder= scrolling=no
  width="100%" onLoad="iFrameHeight()" ></iframe>
Javascript代码:
<script type="text/javascript" language="javascript">
  function iFrameHeight() {
    var ifm= document.getElementById("iframepage");
    var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;
    if(ifm != null && subWeb != null) {
      ifm.height = subWeb.body.scrollHeight;
    }
  }
</script>

第三种方法:(下面这个兼容性更好一些)

<script language="javascript" type="text/javascript">
  function dyniframesize(down) {
    var pTar = null;
    if (document.getElementById){
      pTar = document.getElementById(down);
    }else{
      eval('pTar = ' + down + ';');
    }
    if (pTar && !window.opera){
      //begin resizing iframe
      pTar.style.display="block"
      if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){
        //ns6 syntax
        pTar.height = pTar.contentDocument.body.offsetHeight +;
        pTar.width = pTar.contentDocument.body.scrollWidth+;
      }else if (pTar.Document && pTar.Document.body.scrollHeight){
        //ie5+ syntax
        pTar.height = pTar.Document.body.scrollHeight;
        pTar.width = pTar.Document.body.scrollWidth;
      }
    }
  }
</script>
<iframe src ="/default2.aspx" frameborder="" marginheight="" marginwidth="" frameborder=""
  scrolling="auto" id="ifm" name="ifm" onload="javascript:dyniframesize('ifm');" width="100%">
</iframe>

注意:src=中你必须填写的网页地址,一定要和本页面在同一个站点上,否则,会抱错,说“拒绝访问!”(实际上这是因为Js的跨域问题导致拒绝访问的),意思就是说如果该网页不是发布验证的话,会报错的。