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

第一中方法批量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执行就可以了

你可能感兴趣的:(iframe)