先附上代码，详细查看注释部分.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>iframe自适应高度</title>
<script type="text/javascript">
window.onload = (function () {
var iObj = document.getElementById('iframeDiv'); //iframe 的ID号
iObj.height = iObj.contentWindow.document.documentElement.scrollHeight; //contentWindow iframe的属性
});
</script>
</head>
<body>
<p>http://www.51jquery.com/2009-09/iframe-autoheight/</p>
<p>http://ued.koubei.com/?p=243</p>
<h2> iframe自适应</h2>
<p>1.如果 iframe 里面无许做 DOM 操作的话，我们可以在iframe里面直接 加一个事件 <pre>onload="this.height=this.contentWindow.document.documentElement.scrollHeight" </pre></p>
<p>2.利用 iframe 的ID号 获取 iframe子页面的 contentWindow</p>
<p>3.在iframe页里进行DOM操作,或者表格展现(表格展现如果挤压会改变高度)可以使用下面的方法:</p>
<pre>
<code><script type="text/javascript">
function reinitIframe() {
var iframe = document.getElementById("iframe");
try {
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
} catch (ex) { }
}
window.setInterval("reinitIframe()", 200); //定时去检查iframe的高度,这样保证时时都是自动高了
</script>
</code>
</pre>
<div class="iframe" id="iframe" >
<iframe frameborder="1" scrolling="no" src="test1.html" name="iframe" id="iframeDiv" width="100%" height="100%">
</iframe>
</div>
</body>
</html>
分享到：
相关推荐
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能，其中包括： 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
然而，`<iframe>`的高度自适应问题常常困扰着开发者，尤其是当`<iframe>`内部的内容动态加载或者变化时，如何让`<iframe>`自动调整其高度以适应内容，而不会导致滚动条溢出或内容被截断，成为了一个常见需求。...
### iframe自适应高度和宽度详解 在Web开发中，`iframe`（Inline Frame）是一种常用的HTML元素，用于在当前页面内嵌入另一个HTML文档。它能够实现页面内部局部刷新的效果，广泛应用于各种复杂的网页布局中。然而，...
【标题】：“iframe自适应高度.rar”涉及到的关键知识点主要集中在如何使用JavaScript来处理网页中iframe元素的高度自适应问题。在Web开发中，iframe（Inline Frame）是一种内联框架，常用于在同一个HTML文档中嵌入...
### iframe自适应高度(兼容多种浏览器) 在网页开发过程中，`iframe`是一种常用的元素，用于在当前页面中嵌入另一个HTML文档。然而，默认情况下，`iframe`的高度是固定的，这可能会导致内容显示不完全或者出现不必要...
为了解决这个问题，我们需要让`iframe`能够自适应其内容的高度。本文将详细讲解如何使用JavaScript实现`iframe`自适应高度的解决方案，确保在各种主流浏览器中都能正常工作。 首先，理解`iframe`的基本结构和属性是...
"再谈iframe自适应高度"这个主题，关注的是如何使iframe的内容区域根据所加载页面的高度自动调整，以避免滚动条出现或者内容被截断的问题。在网页设计中，尤其是在构建响应式布局时，这是一个非常关键的优化点。 1....
多层嵌套iframe 自适应高度的解决方法
为了解决这个问题，`jQuery`提供了一个专门的插件——"jquery对iframe自适应高度插件"。 这个插件是专门为了解决`iframe`高度自适应的问题而设计的，它允许`iframe`根据其内部内容自动调整高度，确保用户无需滚动就...
iFrame 自适应高度是前端开发中常见的问题，很多开发者在搜索引擎中搜索相关解决方案，但大多数文章只能解决静态高度的问题，而忽视了 JS 操作 DOM 之后的动态同步问题。同时，在浏览器兼容性方面也存在一定的漏洞。...
下面是实现iFrame自适应高度的方法和相关知识点。 知识点1：iFrame的基本概念 iFrame（Inline Frame）是HTML语言中的一种标签，用于在网页中嵌入另一个网页或文档。iFrame可以用来实现内容的内嵌、广告、Widget等...
"IFRAME自适应"是针对不同设备和屏幕尺寸，确保IFRAME内容能够自动调整其大小以适应页面布局的关键技术。在响应式设计中，IFRAME自适应尤其重要，因为它能让内容在手机、平板电脑和桌面电脑等不同设备上呈现良好的...
### iframe自适应高度实现方法详解 在网页设计与开发中，`iframe`（Inline Frame）是一种常用的HTML元素，用于在当前文档中嵌入另一个HTML文档。然而，在实际应用过程中，经常会遇到`iframe`内容高度固定导致页面...
标题提到的“iframe自动适应高度（完美自适应高度嵌套代码）”提供了一个解决方案，它能够确保`iframe`在各种主流浏览器中都能正确地自适应内容高度，包括360浏览器、IE6-9、遨游、火狐以及搜狗浏览器。 在传统的`...
因为有一个项目要用到iframe自适应高度，网上搜索了以下结果无数，不过看来看去都是那几个，而且基本都测试了一遍，所说的兼容根本不是那么回事，要不IE不正常，要不其他浏览器显示不正常，最后无奈，综合网上的方法...
`iframe`的自适应高度是一项关键技术，它确保了嵌入的内容能够完全显示，避免滚动条的出现，从而提供更好的用户体验。 `iframe`的基本语法如下： ```html <iframe src=...
在探讨“基于jQuery的兼容各种浏览器的iframe自适应高度的脚本”这一主题时，我们首先需要理解几个关键概念：iframe、自适应高度以及jQuery。 ### 1. iframe概述 iframe，即Inline Frame，是HTML中一个用于在当前...
在网页设计中，`iframe`（Inline Frame）是一种嵌入其他网页或内容的标签，它允许我们在一个页面中展示多...通过下载提供的`iframe自适应高度.doc`文档，你可以得到更详细的步骤和解释，以便更好地理解和应用这些技术。
### iframe自适应高度详解 在网页开发中，`iframe`是一种常用的技术，用于在一个HTML页面中嵌入另一个HTML页面。然而，默认情况下，`iframe`的高度是固定的，这可能导致页面布局问题，尤其是当嵌入的内容高度不确定...
### iframe自适应高度（DOM动态操作） #### 概述 在网页开发中，`iframe`是一种常用的技术，用于在一个HTML页面中嵌入另一个HTML页面。然而，在实际应用中经常会遇到一个问题：即`iframe`的高度与内嵌页面的实际...