iframe调用子页面按子页面的内容自动调整高度

<iframe src="子页" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()" ></iframe>

js里写上

<script type="text/javascript" language="javascript">

function iFrameHeight() {

var ifm= documentgetElementById("iframepage");

var subWeb = documentframes documentframes["iframepage"]document : ifmcontentDocument;

if(ifm != null && subWeb != null) {

ifmheight = subWebbodyscrollHeight;

}

}

</script>

你的代码写的没有错

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

先给你讲原理:

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

function show()

{

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

}

windowonload=show;

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

明白了吧

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进行设置高度和宽度

1、iframe元素标签可以使用width和height属性，

<iframe src ="/indexhtml" width="400" height="300"></iframe>

2、可以使用css来定义宽度和高度

<iframe src ="/indexhtml" style="width:400px;height:300px"></iframe>

三、补充：

iframe的属性如下：

分类: 电脑/网络 >> 程序设计 >> 其他编程语言

问题描述:

页面中使用iframe调用另外一个由数据库读取的文件A，比如说我iframe高度设了200象素，但是由于数据库中又添加新的数据导致文件A的高度超过了200象素，有没有办法能使iframe高度设置为随文件A的高度而改变？

解析:

如果iframe的高度没有确定，那将是初始的高度。

iframe是网页中的一部分，其大小还要受到网页的限制，设置最高可以使用height="100%"。

基本上解决iframe超出的高度都是增加了滚动条来实现的，很简单，如果你iframe中的信息超出了一屏幕，你就必须使用滚动条了。

<IFRAME HEIGHT="31" WIDTH="88"></IFRAME>

设置边框的宽度和高度

<iframe frameborder=0 width=170 height=100 marginheight=0 marginwidth=0 scrolling=no src="move-adhtm"></iframe>

<IFRAME>用于设置文本或图形的浮动图文框或容器。

BORDER

<IFRAME BORDER="3"></IFRAME>

设定围绕图文框的边缘宽度

FRAMEBODER

<IFRAME FRAMEBODER="0"></IFRAME>

设置边框是不否为3维（0=否，1=是）

HEIGHT,WIDTH

<IFRAME HEIGHT="31" WIDTH="88"></IFRAME>

设质边框的宽度和高度

SCROLLING

<IFRAME SCROLLING="NO"></IFRAME>

是否有滚动条（YES,NO,AUTO)

SRC

<IFRAME SRC="GIRLGIF"></IFRAME>

指定IFRAME调用的文件或(HTML,HTM,GIF,JPEG,JPG,PNG,TXT,)

“画中画”效果--谈IFRAME标签的使用

纵观时下网站，本来网速就有些慢，可是几乎每页都要放什么Banner，栏目，版权等一大堆雷同的东西，当然，出于网站风格统一、广告效应的需要，本无可厚非，可毕竟让用户的钱包为这些“点缀“的东西”日益消得钱憔悴”了，有没有办法，让这些雷同的东西一次下载后就不用再下载，而只下载那些内容有变化区域的网页内容呢？

答案很肯定：应用Iframe标记！

一、Iframe标记的使用

提起Iframe，可能你早已将之扔到“被遗忘的角落”了，不过，说起其兄弟Frame就不会陌生了。Frame标记即帧标记，我们所说的多帧结构就是在一个浏览器窗口中显示多个HTML文件。现在，我们遇到一种很现实的情况：如有一个教程，是一节一节地上，每页末尾做一个“上一节“、“下一节“的链接，除了每节教程内容不同之外，页面其它部分内容都是相同的，如果一页一页地做笨页面，这似乎太让人厌烦了，这时突发奇想，如果有一种方法让页面其它地方不变，只将教程做成一页一页的内容页，不含其它内容，在点击上下翻页链接时，只改变教程内容部分，其它保持不变，这样，一是省时，另则以后如教程有个三长两短的变动，也很方便，不致于牵一发而动全军了;更重要的是将那些广告Banner、栏目列表、导航等几乎每页的都有的东西只下载一次后就不再下载了。 Iframe标记，又叫浮动帧标记，你可以用它将一个HTML文档嵌入在一个HTML中显示。它不同于Frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件相互独立显示，而是可以直接嵌入在一个HTML文件中，与这个HTML文件内容相互融合，成为一个整体，另外，还可以多次在一个页面内显示同一内容，而不必重复写内容，一个形象的比喻即“画中画“电视。

现在我们谈一下Iframe标记的使用。

Iframe标记的使用格式是:

<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>

src：文件的路径，既可是HTML文件，也可以是文本、ASP等；

width、height："画中画"区域的宽与高；

scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示;

FrameBorder：区域边框的宽度，为了让“画中画“与邻近的内容相融合，常设置为0。

比如:

<Iframe src=">

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

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

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

alert(boxAheight);

})

以上就是关于iframe调用子页面按子页面的内容自动调整高度全部的内容，包括:iframe调用子页面按子页面的内容自动调整高度、JS 获取iframe中的div高度、如何让IFrame自适应高度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！