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

对于自适应高度的代码有很多，可效率什么的考虑进来好代码就不多见了，不过思路倒是差不多的

不带边框的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="778" align="center" height="200" id="win" name="win" onload="Javascript:SetWinHeight(this)" frameborder="0" 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=0 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> 

下面这个兼容性更好一些

<iframe src ="/default2.aspx" frameborder="0" marginheight="0" marginwidth="0" frameborder="0" scrolling="auto" id="ifm" name="ifm" onload="javascript:dyniframesize('ifm');" width="100%"> 
</iframe> 

Javascript代码：

<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 +20; 
                  pTar.width = pTar.contentDocument.body.scrollWidth+20; 
            } else if (pTar.Document && pTar.Document.body.scrollHeight){ 
                  //ie5+ syntax 
                  pTar.height = pTar.Document.body.scrollHeight; 
                  pTar.width = pTar.Document.body.scrollWidth; 
            } 
      } 
} 
</script> 

另一种情况的iframe解决方案（超简单）

在你要载入的那个页面里面可以写入如下代码

iframe子页面
<script language="javascript" type="text/javascript"> 
      parent.document.all("框架ID名").style.height=document.body.scrollHeight; 
      parent.document.all("框架ID名").style.width=document.body.scrollWidth; 
</script>

html部分

<IFRAME id="框架ID名" name="left" frameBorder=0 scrolling=no src="XXX.asp" width="100%"></IFRAME> 

实现 iframe 的自适应高度
实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。

<script type="text/javascript"> 
      //** iframe自动适应页面 **// 
      //输入你希望根据页面高度自动调整高度的iframe的名称的列表 
      //用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。 
      //定义iframe的ID 
      var iframeids=["test"] 
      //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏 
      var iframehide="yes" 
      function dyniframesize() 
      { 
            var dyniframe=new Array() 
            for (i=0; i<iframeids.length; i++) 
            { 
                  if (document.getElementById) 
                  { 
                        //自动调整iframe高度 
                        dyniframe[dyniframe.length] = document.getElementById(iframeids); 
                        if (dyniframe && !window.opera) 
                        { 
                              dyniframe.style.display="block" 
                              if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape 
                              dyniframe.height = dyniframe.contentDocument.body.offsetHeight; 
                        else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //如果用户的浏览器是IE 
                                    dyniframe.height = dyniframe.Document.body.scrollHeight; 
                        } 
                  } 
                  //根据设定的参数来处理不支持iframe的浏览器的显示问题 
                  if ((document.all || document.getElementById) && iframehide=="no") 
                  { 
                        var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids) 
                        tempobj.style.display="block" 
                  } 
            } 
      } 
      if (window.addEventListener) 
            window.addEventListener("load", dyniframesize, false) 
      else if (window.attachEvent) 
            window.attachEvent("onload", dyniframesize) 
      else 
            window.onload=dyniframesize 
</script> 

第三中方法批量iframe自适应：

工作中遇到iframe随所含内容自适应高度的问题，以前在网上看到过类似问题的解决方法，于是搜索一下，找到了一个比较完整的能够兼容浏览器的解决方法，省得自己写了。
虽然不用自己写，思路还是要明白，基本上就是取得iframe属性src所指定的包含文档中内容的高度，然后用来设置iframe自身的高度，在iframe所在页面载入时对页面中的所有需要自适应高度的iframe进行自动设置，省时省力，如果确定页面中全部iframe都需要自适应高度，直接取得iframe数组给代码，就连ID都不用自己写了，完成程序搞定。

<script language="javascript"> 
//输入你希望根据页面高度自动调整高度的iframe的名称的列表 
//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。 
//定义iframe的ID 
var iframeids=["test"]; 
//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏 
var iframehide="yes"; 
function dyniframesize() 
{ 
var dyniframe=new Array() 
for (i=0; i<iframeids.length; i++) 
{ 
if (document.getElementById) 
{ 
//自动调整iframe高度 
dyniframe[dyniframe.length] = document.getElementById(iframeids[i]); 
if (dyniframe[i] && !window.opera) 
{ 
dyniframe[i].style.display="block"; 
if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape 
dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight; 
else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用户的浏览器是IE 
dyniframe[i].height = dyniframe[i].Document.body.scrollHeight; 
} 
} 
//根据设定的参数来处理不支持iframe的浏览器的显示问题 
if ((document.all || document.getElementById) && iframehide=="no") 
{ 
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i]); 
tempobj.style.display="block"; 
} 
} 
} 
if (window.addEventListener) 
window.addEventListener("load", dyniframesize, false); 
else if (window.attachEvent) 
window.attachEvent("onload", dyniframesize); 
else 
window.onload=dyniframesize; 
</script> 

网上有人改进了方法，解决了当iframe所包含文档内容高度动态变化时自动调整iframe高度的问题，原理是在iframe所在页面不断扫描iframe包含文档的内容高度并改变iframe自身高度，这种方法貌似解决了问题，但是对页面速度和系统资源占用是否有影响还很难说，感觉方法有些偏执，应该有更好的解决方法。
第四种方法，只针对知道的iframe的ID调用 不推荐

function iframeAutoFit(iframeObj){ 
setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight);},200) 
}

使用方法呢，大家在需要自适应的iframe上加个id，然后js执行就可以了