1. 程式人生 > >JavaScript應用:Iframe自適應其載入的內容高度

JavaScript應用:Iframe自適應其載入的內容高度

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

    
elseif(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 高度變化時頁面跳動的太厲害,在呼叫的時候可酌情使用這個設定。