动态调整iframe页面的大小

 今天遇到了一个问题，在父页面内有一个iframe能自动根据载入页面的大小而动态调整页面大小。特此记录下解决方法：

 

 父页面main.html内js代码：

Js代码

1. /*动态调整iframe的大小*/  
2.    function changeIframeSize(iframeContentHeight){   
3.       document.getElementById('rightContent').height = iframeContentHeight+20;   
4.    }   
5.    /*iframe页面载入处理函数*/  
6.    function iframeOnload()   
7.    {   
8.        var frms=document.getElementById('rightContent');   
9.        /*判断浏览器类型*/  
10.         var height=($.browser.msie||$.browser.opera)? frms.document.body.scrollHeight:frms.contentDocument.body.offsetHeight;   
11.         changeIframeSize(height);   
12.         /*this.height=rightContent.document.body.scrollHeight*/  
13.    }  

 /*动态调整iframe的大小*/    function changeIframeSize(iframeContentHeight){       document.getElementById('rightContent').height = iframeContentHeight+20;    }    /*iframe页面载入处理函数*/    function iframeOnload()    {        var frms=document.getElementById('rightContent');        /*判断浏览器类型*/         var height=($.browser.msie||$.browser.opera)? frms.document.body.scrollHeight:frms.contentDocument.body.offsetHeight;         changeIframeSize(height);         /*this.height=rightContent.document.body.scrollHeight*/    }

  父页面main.html内的iframe：

Html代码

1. <div id="right" >  
2.     <iframe width="100%" frameBorder="0" frameSpacing="0" scrolling="auto" marginHeight="0" marginWidth="0" name="rightContent" src="articlesList.jsp?categoryId=-1" id="rightContent" onload="iframeOnload()" ></iframe>  
3.     </div>  

 <div id="right" >     <iframe width="100%" frameBorder="0" frameSpacing="0" scrolling="auto" marginHeight="0" marginWidth="0" name="rightContent" src="articlesList.jsp?categoryId=-1" id="rightContent" onload="iframeOnload()" ></iframe>     </div>

 载入页面sub.html内动态调整js代码:

Js代码

1. var height=($.browser.msie||$.browser.opera)? document.body.scrollHeight:document.body.offsetHeight;/*判断浏览器类型*/  
2. parent.changeIframeSize(height);/*调用父页面内的js函数，调整iframe的大小*/  

  var height=($.browser.msie||$.browser.opera)? document.body.scrollHeight:document.body.offsetHeight;/*判断浏览器类型*/  parent.changeIframeSize(height);/*调用父页面内的js函数，调整iframe的大小*/

 

如上述代码所示，动态调整函数主要有两个：

1.iframeOnload主要用于当载入页面刚载入完成后，则响应iframe的onload事件；

 

2.changeIframeSize用于实际调整iframe的大小。iframe的onload的事件只有当该页面第一次载入时候才触发，而如果我们希望在页面载入以后，iframe仍然能根据载入页面的大小变化而动态调整，则是在载入页面中手动调用父页面内的changeIframeSize函数。

 

上述代码需要注意的地方如下：

1.$.browser.msie||$.browser.opera，用于判断浏览器的类型，这主要是不同浏览器对页面的实际尺寸理解不一致造成。我这里是利用jQuery来判断浏览器类型，因而还需要载入jQuery.js文件；

2.注意表示iframe内的载入页面在IE中无论是父页面还是载入页面都是调用document的；而在firefox中则不一样，在父亲中则是调用contentDocument,而在载入页面中则是用document,具体请参见上述两处浏览器类型判断代码即可。