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

逃离我推掉我的手 2022-08-20 03:15 221阅读 0赞

我在一个页面中有两个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);  
          }      
        }

主页面代码

被引用的页面中要加入：

实现原理是，当主页面中的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"  
            οnlοad="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"  
                        οnlοad="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][http_zengyouyuan.iteye.com_blog_760569]

[http_zengyouyuan.iteye.com_blog_760569]: http://zengyouyuan.iteye.com/blog/760569