动态调整iframe页面的大小

          在做网页的时候，经常会遇到希望，在父页面内有一个iframe能自动根据载入页面的大小而动态调整页面大小。特此记录下解决方法：

  父页面main.html内js代码：

Js代码

1.   
2.    function changeIframeSize(iframeContentHeight){   
3.       document.getElementByIdx('rightContent').height = iframeContentHeight+20;   
4.    }   
5.      
6.    function iframeOnload()   
7.    {   
8.        var frms=document.getElementByIdx('rightContent');   
9.          
10.         var height=($.browser.msie||$.browser.opera)? frms.document.body.scrollHeight:frms.contentDocument.body.offsetHeight;   
11.         changeIframeSize(height);   
12.           
13.    }  

       function changeIframeSize(iframeContentHeight){         document.getElementByIdx('rightContent').height = iframeContentHeight+20;      }            function iframeOnload()      {          var frms=document.getElementByIdx('rightContent');                     var height=($.browser.msie||$.browser.opera)? frms.document.body.scrollHeight:frms.contentDocument.body.offsetHeight;           changeIframeSize(height);                 }

  父页面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" οnlοad="iframeOnload()" ></iframe>       </div>

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

Js代码

1. var height=($.browser.msie||$.browser.opera)? document.body.scrollHeight:document.body.offsetHeight;  
2. parent.changeIframeSize(height);  

   var height=($.browser.msie||$.browser.opera)? document.body.scrollHeight:document.body.offsetHeight;     parent.changeIframeSize(height);

 

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

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

 

转自：http://jackandroid.javaeye.com/blog/520837

<script type="text/javascript" id="wumiiRelatedItems"> </script>