iframe自适应高度方法汇总

方法一:

在主页面中对于嵌入的iframe页面高度未知，而且iframe页面的高度也不定，故不能在主页面中通过DOM来控制高度。在iframe页面中加入以下脚本便可实现：

在Iframe页面里添加以下JS:

<script type=”text/javascript”>
/*
iframe 高度自适应脚本（IE6+、FF、Opera、Chrome等测试通过） 作者未知
*/
function iframeAutoFit()
{
   try
        {
          if(window!=parent)
            {
            var a = parent.document.getElementsByTagName(”IFRAME”);
             for(var i=0; i<a.length; i++) //author:meizz
               {
                if(a[i].contentWindow==window)
                   {
                  var h1=0, h2=0;
                  a[i].parentNode.style.height = a[i].offsetHeight +”px”;
                  a[i].style.height = “10px”;
if(document.documentElement&&document.documentElement.scrollHeight)
                {
                   h1=document.documentElement.scrollHeight;
                 }
                 if(document.body) h2=document.body.scrollHeight;
                 var h=Math.max(h1, h2);
               if(document.all) {h += 4;}
                if(window.opera) {h += 1;}
                a[i].style.height = a[i].parentNode.style.height = h +”px”;
                }
          }
     }
 }
catch (ex){}
  }
if(window.attachEvent)
{
   window.attachEvent(”onload”,iframeAutoFit);
}
else if(window.addEventListener)
{
     window.addEventListener(’load’, iframeAutoFit, false);
}
</script>

父页面引用Iframe代码如下：

<iframe frameborder=”0″ width=”100%” src=”#” name=”resultIframe”
id=”resultIframe” scrolling=”no”></iframe>

方法二:

据说各个浏览器测试过.

<script language="javascript">
function resize(){var h=50;
try{
if(ifr_lb&&ifr_lb.document&&ifr_lb.document.body){
var o=ifr_lb.document.body;
var h=o.scrollHeight + (typeof(o.clientTop)== 'number' ?o.clientTop * 2 : 0);}
}
catch(e){var h=50;window.status=e.description;}
if(h<50){h=50;}
document.getElementById('ifr_lb').style.height=h+'px';
return h+"px";
}
window.onresize=resize;
</script>

<iframe id="ifr_lb" name="ifr_lb" onload="resize()" frameborder="0" src="" scrolling="no" frameborder="no" style="width:100%;;height:expression(resize())" height="22" target="_tc">
浏览器不支持嵌入式框架，或被配置为不显示嵌入式框架。</iframe>


方法三:

<iframe id="iFrame1" name="iFrame1" width="100%" onload="this.height=iFrame1.document.body.scrollHeight" frameborder="0" src="index.htm"></iframe>

看到了吧，关键就在于onload="this.height=iFrame1.document.body.scrollHeight"！

方法四:

function SetCwinHeight()
{
var cwin=document.getElementById("cwin");
if (document.getElementById)
{
if (cwin && !window.opera)
{
if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight)
cwin.height = cwin.contentDocument.body.offsetHeight;
else if(cwin.Document && cwin.Document.body.scrollHeight)
cwin.height = cwin.Document.body.scrollHeight;
}
}
}


<iframe width="778" align="center" height="200" id="cwin" name="cwin" onload="Javascript:SetCwinHeight(this)" frameborder="0" scrolling="no"></iframe>


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


引用时onload="javascript:SetCwinHeight(this)"