iframe自适应高度
本文介绍下，iframe自适应高度的例子，方便初学的朋友学习参考。
不说理论了，直接上iframe实例。
页面，0.htm：
<html>
<body>
<P>测试
<table border="1">
<tr>
<td valign="top">
<a href="1.htm" target="iframe">链接1</a>
<a href="2.htm" target="iframe">链接2</a>
</td>
<td id="mytest">
<IFRAME name="iframe" frameBorder="0" scrolling="no" noresize height="100%" width="457" src="1.htm" ></IFRAME>
</td>
</tr>
</table>
</body>
</html>
1.htm：
<html>
<body onload="parent.document.all('mytest').height=document.body.scrollHeight;">
<P>第一个连接
<p>一草一木
<p>脚本学堂_www.jbxue.com
<p>脚本学堂_www.jbxue.com
<p>四通八达
<p>脚本学堂
<p>六安市
<p>不一样的致青春。
<p>来吧朋友，来吧朋友。
<p>九月份
<p>北京欢迎你
</body>
</html>
2.htm：
<html>
<body onload="parent.document.all('mytest').height=document.body.scrollHeight;">
<P>第二个连接
<p>一草一木
<p>脚本学堂_www.jbxue.com
<p>脚本学堂_www.jbxue.com
<p>四通八达
<p>脚本学堂
<p>六安市
<p>不一样的致青春。
<p>来吧朋友，来吧朋友。
<p>九月份
<p>北京欢迎你
<P>再加高一倍
<p>一草一木
<p>脚本学堂_www.jbxue.com
<p>脚本学堂_www.jbxue.com
<p>四通八达
<p>脚本学堂
<p>六安市
<p>不一样的致青春。
<p>来吧朋友，来吧朋友。
<p>九月份
<p>北京欢迎你
</body>
</html>
本文原始链接：http://www.jbxue.com/article/9113.html
分享到：
相关推荐
### iframe自适应高度和宽度详解 在Web开发中，`iframe`（Inline Frame）是一种常用的HTML元素，用于在当前页面内嵌入另一个HTML文档。它能够实现页面内部局部刷新的效果，广泛应用于各种复杂的网页布局中。然而，...
标题"iframe跨域高度自适应例子源码"指的是一个实例，展示了如何在跨域的情况下使`iframe`内容自动调整高度以适应其内部内容。这个例子提供了一个在线演示（http://okiner.cn/demo/cross-domain/iframe.html）以及源...
在这个例子中，`src`属性指定了要嵌入的页面URL，`width`和`height`分别设置了`iframe`的宽度和高度。 要使`iframe`自适应内容，我们有以下几种方法： 1. **CSS属性**：`iframe`的`style`属性可以设置`height`和`...
`iframe`高度自适应是解决这个问题的关键技术。 首先，`iframe`是一种在HTML文档中嵌入另一个HTML文档的标签，它能够提供独立的浏览环境，常用于展示第三方内容或创建多窗口式的网页设计。然而，当`iframe`内加载的...
在网页开发中，`iframe`（Inline Frame）是一种嵌入其他网页的标签，常用于实现页面内嵌...提供的`iframe_auto_height.html`、`iframe_b.html`、`iframe_c.html`三个文件可能包含了不同的实现示例，可以作为参考学习。
在例子中，界面采用了简单的三部分布局：头部（head）、左侧菜单栏（main_left）和右侧内容展示区（main_right）。通过`include()`函数，PHP可以将各个部分的HTML内容插入到主页面中，从而实现布局。例如，`index....
根据提供的代码片段，我们可以看到一个简单的`iframe`局部刷新的例子。该例子中包含了四个不同的选项卡，每个选项卡点击后都会触发`oniframe`函数，进而改变`iframe`的内容。 ##### 3.1 HTML结构 ```html ...
接着，通过JavaScript动态地将IFrame的宽度和高度设置为100%，这样IFrame就会占据其父容器的全部宽度和高度，实现自适应布局。 这种方法的巧妙之处在于，通过先隐藏IFrame，然后在JavaScript中动态设置其大小和内容...
在这个例子中，`mainFrameLoaded`函数会在`iframe`加载完成后自动执行，通过`contentWindow`获取到`iframe`内页面的`body`高度，并将其设置为`iframe`的高度，从而实现页面的自适应布局。 总结起来，`contentWindow...
这部分代码创建了一个带有三个区域（north、west、center）的布局，其中： - 北侧（north）是一个固定高度（100px）的区域，用于显示商品管理的标题。 - 西侧（west）是一个可折叠的树形菜单栏，设置宽度为200px，...
<br>2007/6/1 Version 3.0.9 beta <br>Updates: 1) web.config中新增configfolder、functionfolder、skin三个必须目录的全局路径设置，以往旧版本如果要在不同级别子目录的页面调用控件都要单独设置...