注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

猪儿不懒

UI设计 前端开发 HTML5+CSS3

 
 
 

日志

 
 

一个页面多个IFRAME自适应  

2009-03-09 09:35:08|  分类: CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

步骤一:将以下这段js放入iframe的指向文件中,这段js是获取iframe的高度。
<script language="javascript">
function iframeAutoFit()
{
try
{
if(window!=parent)
{
var a = parent.document.getElementsByTagName("IFRAME");
for(var i=0; i<a.length; i++)
{
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>

步骤二:将以下js插入到iframe页面代码的最下方,通过window.attachEvent("onload", getIframeheight)事件用来处理获取iframe的高度同时将此高度的数值传给父页面。ifr是父页面中iframe的id,tab是iframe页面中最外层元素的id。
<script language="javascript">
window.attachEvent("onload", getIframeheight)
function getIframeheight(){
parent.document.getElementById("ifr01").style.height = document.getElementById("01").offsetHeight
}
</script>

如果页面出现拒绝访问的报错,请加上iframe页面中加上document.domain="qq.com";
最后在需要的地方添加iframe就行了!
此方法可以让一个页面中多个iframe自适应高度,同时支持IE6 IE7和FF.

  评论这张
 
阅读(759)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017