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; 
} 
} 
} 

View Code

最后，加入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经过测试。 
HTML代码： 

代码以下:

<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> 

下面这个兼容性更好一些

代码以下:

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

另外一种状况的iframe解决方案（超简单） 
重要提示：src=中你必须填写的网页地址，必定要和本页面在同一个站点上，不然，会抱错，说“拒绝访问！”(实际上这是由于Js的跨域问题致使拒绝访问的) 
以前本身也碰到过这个问题，为了获得答案去网上搜索，发现有很多人也遇到了这样的问题，如今就把解决方法共享一下 
一、创建一个bottom.js的文件，而后输入下面的代码（只有两行哦） 

代码以下:

parent.document.all("框架ID名").style.height=document.body.scrollHeight; 
parent.document.all("框架ID名").style.width=document.body.scrollWidth; 

这里的 框架ID名 就是Iframe的ID，好比： 

代码以下:

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

二、给你网站里全部的被包含文件里面每一个都加入 

代码以下:

<script language = "JavaScript" src = "bottom.js"/></script> 

三、OK，收工！ 
在WINXP、IE6下面测试经过。很简单吧！ 
实现 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执行就能够了