怎么让iframe自适应浏览器的高度和宽度

1、在文件夹里创建两个html文件，一个“index”一个“iframe”。

2、在index中添加一个iframe标签，直接嵌入iframe页面。

3、在iframe网页中添加了两个固定高度的div内容。

4、浏览器打开index页面我们发现iframe部分有滚动条，需要滚动显示页面。

5、现在我们在index页面的iframe标签再添加如下的属性。

6、再次打开index页面iframe已经高度自适应了。

iframe代码，注意要写ID

复制代码

代码如下:

<iframe

src="test.html"

id="main"

width="700"

height="300"

frameborder="0"

scrolling="auto"></iframe>

jquery代码一：

复制代码

代码如下:

//注意：下面的代码是放在test.html调用

$(window.parent.document).find("#main").load(function(){

var

main

=

$(window.parent.document).find("#main")

var

thisheight

=

$(document).height()+30

main.height(thisheight)

})

jquery代码二：

复制代码

代码如下:

//注意：下面的代码是放在和iframe同一个页面调用

$("#main").load(function(){

var

mainheight

=

$(this).contents().find("body").height()+30

$(this).height(mainheight)

})

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)

---