博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

让IFrame自适应高度

Posted on 2010-02-06 16:39  a-peng  阅读(6643)  评论(1编辑  收藏  举报

IFrame需要如何自适应高度呢?
要是我们能够知道IFrame所加载页面的高度,然后设置IFrame的高度为所加载页面的高度,那么就可以达到自适应高度了。

那要怎么知道IFrame所加载页面的高度?

var clientHeight = $("#mainFrame").contents().find("body").height();

使用jQuery去查找IFrame中的body的高度,那么clientHeight就是我们想要的了。

但是我们要在什么时候去查找IFrame中的body呢?当然必须在IFrame加载完成的时候,要是IFrame还未加载完成,那我们如何取出它的body.

$("#mainFrame").load(function() {
    
var clientHeight = $("#mainFrame").contents().find("body").height();
    $(
this).height(clientHeight);
});


这个世界是不是美好了很多?

btw: 2009-12-16
今天修改了IFrame里的结构为
<div id="main"></div> float: left;
<div id="right-sidebar"></div> float: left;
$("#mainFrame").contents().find("body").height(); 取出的值为0

这是为什么呢?因为使用了float,则脱离了文档结构,你可以通过Firebug移过去,可以看到body没有选中任何区域。
那我们该怎么办呢?
只有main和right-sidebar两部分,取高的那部分不就可以了。

var mainHeight = $("#mainFrame").contents().find("#main").height();
var rightHeight = $("#mainFrame").contents().find("#right-sidebar").height();
var clientHeight = Math.max(mainHeight, rightHeight);