现在的位置: 首页 > 综合 > 正文

JavaScript应用:Iframe自适应其加载的内容高度

2013年01月02日 ⁄ 综合 ⁄ 共 2410字 ⁄ 字号 评论关闭

main.htm:

<html>  
    
<head>  
       
<meta  http-equiv='Content-Type'  content='text/html;  charset=gb2312' />  
       
<meta  name='author'  content='F.R.Huang(meizz梅花雪)//www.meizz.com' />  
       
<title>iframe自适应加载的页面高度</title>  
    
</head>  
     
    
<body>
        
<div><iframe src="child.htm"></iframe></div>
    
</body>
</html>

child.htm:

 

<html>  
<head>  
    
<meta  http-equiv='Content-Type'  content='text/html;  charset=gb2312' />  
    
<meta  name='author'  content='F.R.Huang(meizz梅花雪)//www.meizz.com' />  
    
<title>iframe  自适应其加载的网页(多浏览器兼容)</title>  
    
<script type="text/javascript">
    
<!--
    
function iframeAutoFit()
    
{
        
try
        
{
            
if(window!=parent)
            
{
                
var a = parent.document.getElementsByTagName("IFRAME");
                
for(var i=0; i<a.length; i++//author:meizz
                {
                    
if(a[i].contentWindow==window)
                    
{
                        
var h1=0, h2=0, d=document, dd=d.documentElement;
                        a[i].parentNode.style.height 
= a[i].offsetHeight +"px";
                        a[i].style.height 
= "10px";

                        
if(dd && dd.scrollHeight) h1=dd.scrollHeight;
                        
if(d.body) h2=d.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);
        
//window.attachEvent("onresize",  iframeAutoFit);
    }

    
else if(window.addEventListener)
    
{
        window.addEventListener(
'load',  iframeAutoFit,  false);
        
//window.addEventListener('resize',  iframeAutoFit,  false);
    }

    
//-->
    
</script>  
</head>  
<body>
    
<table border="1" width="200" style="height: 400px; background-color: yellow">
        
<tr>
            
<td>iframe  自适应其加载的网页(多浏览器兼容:IE5.5+、Mozilla、Firefox、Opera、Netscape7.2+、Safari3等,支持XHTML)</td>
        
</tr>
    
</table>
</body>  
</html>

  很多人反应在IE7里使用它会死机,那是因为在自适应高度时触发了 window.onresize 事件,而这个事件又去调用这个调整 <iframe> 高度的函数,产生了死循环调用。

  这段代码里我对 iframe 所在的父元素也设定了一个高度,以防止iframe 高度变化时页面跳动的太厉害,在调用的时候可酌情使用这个设置。

 

原文:http://blog.csdn.net/meizz/archive/2006/03/27/639857.aspx

抱歉!评论已关闭.