动态调整iframe页面的大小

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

 

 父页面main.html内js代码：

 /*动态调整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：

 <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代码:

	  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,具体请参见上述两处浏览器类型判断代码即可。