多个iframe自适应高度共用一个滚动条

      我在一个页面中有两个iframe，这两个是并列的，一个在左边显示person的数据，一个在右边显示cell的数据，如果被引用的页面数据太大，就会被截掉，但是设置scrolling=“auto”的话，双会出现两个滚动条。在网上查了一下代码，大概有两种方式可以实现

方法一.被引用的页面是静态的高度

js代码

//获取被包含的页面的静态高度，来设置iframe的高度  
    function setFirstIframeHeight(value){  
    if(value=="person"){  
         var personHeight = jQuery('#person').contents().find("meta").attr("content");    
         jQuery('#person').height(personHeight);  
     }else if(value=="cell"){  
         var cellHeight = jQuery('#cell').contents().find("meta").attr("content");    
         jQuery('#cell').height(cellHeight);  
      }      
    }  

主页面代码

<table class="result" width="100%" cellpadding="0" cellspacing="0">  
            <tr>  
                <td width="49%">  
                    <iframe name="person" id="person" frameborder="0"  
                onload="setFirstIframeHeight('person')" scrolling="no" width="100%" height="500">  
                        </iframe>  
                </td>  
                <td width="2%"> </td>  
                <td width="49%">  
                    <iframe name="cell" id="cell" frameborder="0"   
            onload="setFirstIframeHeight('cell')" scrolling="no" width="100%" height="500">  
                        </iframe>  
                </td>  
            </tr>  
</table>  

被引用的页面中要加入：

<meta content="text/html; charset=UTF-8; 750px"/>  

实现原理是，当主页面中的iframe在加载的时候，调用onload里面的js代码，获取被引入页面的高度，并把这个高度值赋给iframe,这样当被引入的页面的高度超过iframe的高度时，就会在两个iframe的外面出现滚动条

但是这个方法不能获取未知高度的子页面的height值,当被引入的页面高度不能用content:xxxpx来表示时，这个方法就不适用了，于是出现了第二种方法

方法二、利用Interval来实现

<table class="result" width="100%" cellpadding="0" cellspacing="0">   
<tr>   
    <td width="49%">   
        <iframe name="person" id="person" frameborder="0"    scrolling="no" width="100%" height="500"  
        onload="this.height=this.contentWindow.document.documentElement.scrollHeight" >   
            <script type="text/javascript">   
            //动态获取被引用的页面的高度   
            function reinitIframe1(){       
                var iframe = document.getElementById("person");      
                try{       
                    var bHeight = iframe.contentWindow.document.body.scrollHeight;       
                    var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;       
                    var height = Math.max(bHeight, dHeight);       
                    iframe.height =  height;       
                }catch (ex){}       
            }       
            window.setInterval("reinitIframe1()", 200);   
            </script>    
            </iframe>   
        </td>   
        <td width="2%"> </td>   
        <td width="49%">   
                <iframe name="cell" id="cell" frameborder="0"  scrolling="no" width="100%" height="500"  
                    onload="this.height=this.contentWindow.document.documentElement.scrollHeight" >   
                    <script type="text/javascript">   
                    //动态获取被引用的页面的高度   
                    function reinitIframe2(){       
                        var iframe = document.getElementById("cell");      
                        try{       
                            var bHeight = iframe.contentWindow.document.body.scrollHeight;       
                            var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;       
                            var height = Math.max(bHeight, dHeight);       
                            iframe.height =  height;       
                        }catch (ex){}       
                    }       
                    window.setInterval("reinitIframe2()", 200);   
                    </script>    
            </iframe>   
        </td>   
    </tr>   
</table>   

转自： http://zengyouyuan.iteye.com/blog/760569