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

20 篇文章 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);  
      }      
    }  


主页面代码
<table class="result" width="100%" cellpadding="0" cellspacing="0">  
            <tr>  
                <td width="49%">  
                    <iframe name="person" id="person" frameborder="0"  
                οnlοad="setFirstIframeHeight('person')" scrolling="no" width="100%" height="500">  
                        </iframe>  
                </td>  
                <td width="2%"> </td>  
                <td width="49%">  
                    <iframe name="cell" id="cell" frameborder="0"   
            οnlοad="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"  
        ο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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值