iframe自动适应高度

iframe 自动适应高度

最近在做一个web后台管理的项目,本来打算采用传统的frameset和frame来完成frame的建设。但是发现html5中已经不再推荐使用这两个tag了。同时,为了更加的轻量级,没有采用像extjs这类的js框架。所以只能使用iframe了。


我的web页面里面呢包含有四个部分的iframe:header;menu;content;footer。其中header,menu,footer都是纯静态的页面。content是动态的,页面加载的时候会有一些后台ajax的请求然后创建页面内容。


看了网上的一些前辈的介绍,如何让iframe自动适应子窗口的高度。基本上也有一些效果的。具体说来就是针对纯静态页面的解决效果很好。但是遇到动态的页面就显得有点问题了。


我的方案:先看看代码吧:

<body>
    <div id="header">
        <iframe src="header.html"></iframe>
    </div>
    <div id="main">
        <div id="nav">
            <iframe src="nav.html"></iframe>
        </div>
        <div id="content">
            <iframe src="home.html" name="contentFrame" id="contentFrame"></iframe>
        </div>
    </div>
    <div id="footer">
        <iframe src="footer.html"></iframe>
    </div>
<script type="text/javascript">
    function setHeight() {
        var sets = document.getElementsByTagName('iframe');

        for (i = 0; i < sets.length; i++) {
            sets[i].onload = function() {
                this.height = this.contentDocument.body.scrollHeight;
            };
        }
    }
    
    setHeight();
</script>
</body>

关键就在于js的位置了。网上有一种解决办法,是把js放在head里面。然后给body加上事件:

<body οnlοad="setHeight()">
因为我的content里面有ajax的代码:
$(document).ready(function(
    $.ajax(...);
));
ajax的返回处理代码是给body里面添加新的table数据。这样的话,body的scrollHeight属性就变了。


当我采用在body里面添加事件来解决的时候,发现并不是很好解决。


但是当我把js放到了body的最尾部的时候。惊奇的发现问题被解决了。



总结:经过多次的尝试,总算是找到了一个我认为合适的解决办法。


问题:第一次加载页面的时候还是挺管用的。但是当页面中再次发生ajax请求需求刷新局部数据的时候,这个时候的高度又不能动了。现在还在努力探讨中,如果有哪位高手知道的话,还望指点一二。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值