您的位置：首页 > 其它

dh: 实现iframe 自适应高度的问题（初始化和动态加载数据的时候）

2010-07-23 17:11 841 查看

//ifarme的呈现方式 functionInitIframeHtml(url){ $('#workarea').html("<iframesrc="+url+"frameborder='0'scrolling='no'width='800'id='adminFrame'></iframe>"); }
//注意高度不要设置。

　　

functioniframeAutoHeight(){
if(window.addEventListener)
window.addEventListener("load",iframeAutoFit,false);
elseif(window.attachEvent)
window.attachEvent("onload",iframeAutoFit);
else
window.onload=iframeAutoFit;
}

document.iframeAutoFit=iframeAutoFit;

functioniframeAutoFit(){
if(window!=parent){
vara=parent.document.getElementsByTagName("IFRAME");
for(vari=0;i<a.length;i++){
if(a[i].contentWindow==window){
a[i].style.height='50px';
varh1=0,h2=0;
if(document.documentElement&&document.documentElement.scrollHeight)
h1=document.documentElement.scrollHeight;
if(document.body)
h2=document.body.scrollHeight;
varh=Math.max(h1,h2);
if(document.all)
h+=4;
if(window.opera)
h+=1;
a[i].style.height=h+"px";
}
}
}
}

页面初始化的时候:
$().ready(function(){iframeAutoHeight();});
动态加载数据的时候：
iframeAutoFit（）；

　　

js实现iframe自适应高度超级简单的方法：

parent.document.getElementById("adminFrame").style.height=document.body.scrollHeight+"px";

jquery实现iframe自适应高度超级简单的方法，也不用写什么判断浏览器高度、宽度啥的。

下面的两种方法自选其一就行了。一个是放在和iframe同页面的，一个是放在test.html页面的。注意别放错地方了哦。iframe代码，注意要写ID

jquery代码１：//注意：下面的代码是放在test.html调用$(window.parent.document).find("#main").load(function(){varmain=$(window.parent.document).find("#main");varthisheight=$(document).height()+30;main.height(thisheight);});

jquery代码２：//注意：下面的代码是放在和iframe同一个页面调用$("#main").load(function(){varmainheight=$(this).contents().find("body").height()+30;$(this).height(mainheight);});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航