如何使iframe的高度等于嵌入网页的高度

如何使iframe的高度等于嵌入网页的高度,第1张

<iframe id="frame_content" src="iframe_bhtml" scrolling="no" frameborder="0" onload="thisheight=thiscontentWindowdocumentdocumentElementscrollHeight"></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);

你用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也可也 在加载的时候

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

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

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

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

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

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

以上就是关于如何使iframe的高度等于嵌入网页的高度全部的内容,包括:如何使iframe的高度等于嵌入网页的高度、如何让iframe自适应高度、jq怎么获取自适应高度的iframe高度的准确数值等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9754621.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-01
下一篇2023-05-01

发表评论

登录后才能评论

评论列表(0条)

    保存