【实例描述】
iframe框架可以动态加载网页，并能嵌入到当前页面中，实现页面嵌套的功能。为了更好地显示子页，本例学习如何自动调整iframe的高度。
【实现代码】
本例有两个页面，第一个页面“iframe自适应高度1.htm”中有一个iframe，实现代码如下所示：
<html>
<head>
<title>iframe自适应高度</title>
</head>
<body>
<div><iframe src="iframe自适应高度.htm"></iframe></div>
</body>
</html>
第二个页面会自动调整子页的大小，实现代码如下所示：
<html>
<head>
<title>iframe自适应网页</title>
<script type="text/javascript">
//自动调整iframe框架的方法
function iframeAuto()
{
try
{
if(window!=parent)
{
//定位需要调整的frame框架（在父级窗口中查找）
var a = parent.document.getElementsByTagName("IFRAME");
for(var i=0; i<a.length; i++)
{
if(a[i].contentWindow==window)
{
var h1=0, h2=0;
a[i].parentNode.style.height = a[i].offsetHeight +"px";
a[i].style.height = "10px"; //首先设置高度为10px,后面会修改
if(document.documentElement&&document.documentElement.scrollHeight)
{
h1=document.documentElement.scrollHeight;
}
if(document.body) h2=document.body.scrollHeight;
var h=Math.max(h1, h2); //取两者中的较大值
if(document.all) {h += 4;}
if(window.opera) {h += 1;}
//调整框架的大小
a[i].style.height = a[i].parentNode.style.height = h +"px";
} } }
}
catch (ex){}
}
//事件绑定的方法，支持IE5以上版本
if(window.attachEvent)
{
window.attachEvent("onload", iframeAuto);
}
else if(window.addEventListener)
{
window.addEventListener('load', iframeAuto, false);
}
//-->
</script>
</head>
<body>
<table border="1" width="200" style="height: 400px; background-color: gray">
<tr>
<td>iframe 自适应其加载的网页</td>
</tr>
</table>
</body>
</html>
【运行效果】
iframe自适应高度实例的运行效果如图5-8所示。
图5-8 iframe自适应高度实例的运行效果
【难点剖析】
本例的重点有如何获取父级页面中的iframe、如何实现iframe的自动调整。获取父级页面中的iframe，主要依靠“parent.document.getElementsByTagName("IFRAME")；”语句，其中的“parent”便是获取的父级窗口。自动调整功能实现是将调整方法绑定到onload事件中，即窗体一加载便调整iframe的大小。
原贴：http://book.csdn.net/bookfiles/695/10069521616.shtml
<!-- page -->
分享到：
相关推荐
### 自动调节iframe高度，而不显示其滚动条 js #### 背景介绍 在网页开发过程中，经常会遇到需要在一个页面内嵌入另一个页面的情况，这时通常会使用HTML中的`iframe`元素来实现。然而，当嵌入的内容高度不确定或者...
### iFrame自动调整高度知识点详解 #### 一、前言 在网页开发中，经常会遇到需要将一个网页嵌入到另一个网页中的场景，这时候就会用到`<iframe>`标签。然而，由于`<iframe>`的高度默认是固定的，在内容发生变化时...
因此，让`iframe`能够自动调整高度变得尤为重要。 #### 三、解决方案 接下来，我们将介绍一种简单有效的方法来实现`iframe`自动改变高度。该方法适用于现代浏览器，包括Chrome、Firefox、Safari等。 **核心代码...
然而，`<iframe>`的高度自适应问题常常困扰着开发者，尤其是当`<iframe>`内部的内容动态加载或者变化时，如何让`<iframe>`自动调整其高度以适应内容，而不会导致滚动条溢出或内容被截断，成为了一个常见需求。...
为了解决这个问题，我们需要一种方法来动态地调整`iframe`的高度，使其与内容匹配。这种技术通常涉及到JavaScript，通过监听`iframe`的`load`事件，然后获取`iframe`内的文档高度，并设置到`iframe`的`height`属性上...
### iframe高度自适应技术详解 在网页开发过程中，经常会遇到需要在一个页面中嵌入另一个页面的需求，这通常通过HTML的`iframe`元素实现。然而，一个常见的问题是当嵌入的内容高度变化时，如何使`iframe`的高度能够...
当`iframe`加载的页面高度不确定时，我们需要动态调整`iframe`的高度以适应内容。由于跨域限制，我们不能直接获取子页面的DOM信息，但可以通过以下策略实现： - **使用代理页面** 创建一个与父页面同源的代理...
Iframe 高度自适应是指在网页中嵌入的 iframe 元素能够根据其内容自动调整高度，以适应不同的浏览器和屏幕尺寸。js 控制 Iframe 高度自适应是指使用 JavaScript 语言来控制 iframe 的高度，使其能够自动调整以适应...
自动调整iframe高度的核心在于监听页面加载完成事件，然后通过JavaScript读取iframe内部内容的高度，并将其设置为iframe本身的高度。这一过程通常需要针对不同浏览器进行适配，因为iframe在不同的浏览器中可能采用...
它们通常使用`postMessage`，并在iframe内部检测内容变化，自动调整高度。 3. **服务器端配合**：如果能够控制iframe加载的页面，可以在服务器端添加一个特殊的查询参数，比如`height`，并根据这个参数返回动态调整...
然而，这些静态属性无法自动调整以适应内容的变化。 接下来，我们可以利用JavaScript的DOM操作和事件监听来实现自适应高度的功能。以下是一个基本的实现步骤： 1. **获取`iframe`元素**：通过`document....
当`iframe`中的内容高度不确定时，我们希望`iframe`能自动调整其高度以完全显示内部内容，避免出现滚动条或者内容被截断的情况。以下是一些实现`iframe`高度自适应的方法： 1. **JavaScript解决方案**： - **...
标题“Iframe 高度自适应浏览器高度”涉及的核心知识点是如何让Iframe的大小根据其内容自动调整，特别是高度，以便始终保持与浏览器窗口的高度同步，从而提供更好的用户体验。 首先，我们需要了解Iframe的基本结构...
标题"iframe高度随子页高度变化"和描述中提到的问题，正是关注于这个动态调整`iframe`高度的技术。 要实现`iframe`高度随子页高度变化，主要涉及以下几个关键点： 1. **设置iframe的初始高度**：首先，我们需要为`...
做子页面时经常碰到iframe无法自动调整高度显示问题，本js解决此问题，通用支持各主流浏览器
然而，在使用`iframe`时，如何使其高度和宽度能够根据内容自动调整，是开发者们经常遇到的问题之一。 #### 一、基本概念 在默认情况下，`iframe`的高度和宽度是固定的，需要开发者手动设置。当嵌入的内容发生变化...
在实际应用中，我们通常希望`iframe`的高度能根据其内容自动调整，避免滚动条的出现。然而，由于同源策略的限制，跨域的`iframe`无法通过JavaScript获取其内容的高度，这给高度自适应带来了挑战。 **解决方法：** ...
为了解决这个问题，我们需要让`iframe`根据其内容自动调整高度和宽度。本篇文章将详细探讨如何实现`iframe`根据页面内容自适应高度和宽度。 首先，我们需要理解`iframe`的基本结构。一个简单的`iframe`标签如下： ...
`iframe`内的页面向其父窗口发送消息，包含它的高度信息，然后父窗口根据接收到的消息调整`iframe`的高度。 ```javascript // 在父窗口 window.addEventListener('message', function(event) { if (event....