首页 新闻 会员 周边

【求助】IFRAME自适应高度后滚动条消失

0
悬赏园豆：200 [已解决问题] 解决于 2014-04-08 14:33

IFRAME原来是高度530，在IE6下正好，其他浏览器或者分辨率下会高度过低，框架下面留白，然后找了自适应的代码如下：

<div id="content">                
                <iframe id="UFrame" name="UFrame" width="100%" frameborder="0" scrolling="yes" marginwidth="0" marginheight="0" ></iframe>
               <script type="text/javascript">
                    function reinitIframe(){
                        var iframe = document.getElementById("UFrame");
                        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("reinitIframe()", 200);
                </script> 
            </div>

高度自适应解决了，可是原来有滚动条的，现在没有了，如下图：

 

分别是IE6和CHROME下的截图，谁帮忙看下是哪里的问题？框架外层是EXTJS布局的。

冰牙的主页 冰牙 | 初学一级 | 园豆：118
提问于：2014-04-03 16:03
< >
分享
最佳答案
0 
function SetCwinHeight(){   
                        var h;
                        if(navigator.userAgent.indexOf("MSIE")>0){
                            h = document.getElementById("panel-1022").clientHeight 
                                - document.getElementById("header-1029").clientHeight;
                        }else{
                            h = document.getElementById("ext-gen1046").clientHeight;
                        }                     
                        document.getElementById("UFrame").height = h;
                    }
                    window.setInterval("SetCwinHeight()", 2000);

问题的原因找到了，IFRAME的高度需要的是clientHeight，网上搜出来的都是框架内容页面的scrollHeight。

EXTJS本身已经实现高度自适应了，所以简单的方法是直接去取框架外层DIV的高度重新设定下新的高度就可以。

在IE和非IE下有点不一样！是不是跟EXTJS在IE和非IE下的加载呈现顺序有关就不太清楚了。

冰牙 | 初学一级 |园豆：118 | 2014-04-08 14:30

强大~

幻天芒 | 园豆：37175 (高人七级) | 2014-04-08 16:17
其他回答(4)
0

高度自适应了，滚动条还需要干什么？它自己隐藏了啊。

happydaily | 园豆：301 (菜鸟二级) | 2014-04-03 17:05

下面还有内容但是滚动条没了！

支持(0) 反对(0) 冰牙 | 园豆：118 (初学一级) | 2014-04-07 21:18
1

你是指这段代码影响了ExtJs的滚动条吗？

收获园豆：150
幻天芒 | 园豆：37175 (高人七级) | 2014-04-03 19:00

大侠说到点上了，求指教

支持(0) 反对(0) 冰牙 | 园豆：118 (初学一级) | 2014-04-07 21:18

谢谢给了思路，从EXTJS找解决方法

支持(0) 反对(0) 冰牙 | 园豆：118 (初学一级) | 2014-04-08 14:32
0

貌似可以让滚动套一直显示 不管有没有超出 都可以一直显示的

收获园豆：20
落幕残情 | 园豆：34 (初学一级) | 2014-04-04 09:50
0

楼主是就想让他有滚动条还是说下面还有内容但是滚动条没了？

收获园豆：30
seaconch | 园豆：4823 (老鸟四级) | 2014-04-04 14:53

下面还有内容但是滚动条没了！

支持(0) 反对(0) 冰牙 | 园豆：118 (初学一级) | 2014-04-07 21:18
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。