iFrame如何自动适应包含页面得高度

跨域问题，没法实现

因为你没法获取被包含页面的任何信息，当然包括它的高度。所有尝试都会以“拒绝访问”告终。

不过我不知道你要做的是网站还是单纯在本地跑的html页面，如果是本地html，可以简单地把文件扩展名改为hta就可以解决拒绝访问的问题，接着再获取其页面的高度并设置iframe的高度即可。关于高度的获取，可用“[iframe对象]contentWindowdocumentbodyclientHeight”，反正关键是contentWindow这个对象，有了它，你 *** 作iframe中的页面，就像 *** 作自己的页面一样轻松了。

但如果你做的网页是放到网站上去的，那没办法，浏览器考虑到安全性问题，是不允许某个网页去 *** 作不在同一个域下的页面的。你自己可以测试一下，当iframe的src是不同域下的网址时，获取contentWindow对象就会提示“拒绝访问”的。

你的代码写的没有错

如果我猜得不错的话,你是直接运行的这段代码!

先给你讲原理:

调用DOM对象,必须在页面(框架)完全下载完后才能构建DOM树, 所以我们一般是把这些代码封到一个函数内,再用windowonload来指向这样解决:

function show()

{

documentwrite(windowframes["cwin"]documentgetElementById("reg")styleheight);

}

windowonload=show;

也许你会说,那为什么我的innerHTML能获取到呢 请注意:完全下载!

明白了吧

你用jq的时候是在页面加载的时候就获取了，并不是点击的时候获取的。时机不对。

$('#btn2')click(function () {

var boxAheight = $("#frame_content")outerHeight(true);

alert(boxAheight);

})

我用的就是这段了

<script type="text/javascript">

function SetCwinHeight(obj) {

var cwin = obj;

if (documentgetElementById) {

if (cwin && !windowopera) {

if (cwincontentDocument && cwincontentDocumentbodyoffsetHeight)

cwinheight = cwincontentDocumentbodyoffsetHeight + 20; //FF NS

else if (cwinDocument && cwinDocumentbodyscrollHeight)

cwinheight = cwinDocumentbodyscrollHeight + 10; //IE

}

else {

if (cwincontentWindowdocument && cwincontentWindowdocumentbodyscrollHeight)

cwinheight = cwincontentWindowdocumentbodyscrollHeight; //Opera

}

}

}

</script>

<iframe id="id" name="name" frameborder="0" width="750px" scrolling="no"

onload="SetCwinHeight(this)"></iframe>

你可以自己设置一下 或者放一个什么在iframe当背景

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 = Mathmax(mainHeight, rightHeight);

以上就是关于iFrame如何自动适应包含页面得高度全部的内容，包括:iFrame如何自动适应包含页面得高度、JS 获取iframe中的div高度、jq怎么获取自适应高度的iframe高度的准确数值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！