好几次看到有人提问问到如何实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象，刚好我在工作中也碰到了类似问题，于是上网翻查，东抄抄西看看，弄出来这么一个函数，贴到页面里面就能用了。不敢独享，大家要是觉得有用，欢迎使用
<script type="text/javascript">
//** iframe自动适应页面 **//
//输入你希望根据页面高度自动调整高度的iframe的名称的列表
//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。
//定义iframe的ID
var iframeids=["test"]
//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏
var iframehide="yes"
function dyniframesize()
{
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++)
{
if (document.getElementById)
{
//自动调整iframe高度
dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);
if (dyniframe[i] && !window.opera)
{
dyniframe[i].style.display="block"
if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape
dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;
else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用户的浏览器是IE
dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
}
}
//根据设定的参数来处理不支持iframe的浏览器的显示问题
if ((document.all || document.getElementById) && iframehide=="no")
{
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}
if (window.addEventListener)
window.addEventListener("load", dyniframesize, false)
else if (window.attachEvent)
window.attachEvent("onload", dyniframesize)
else
window.onload=dyniframesize
</script>
使用的时候只要贴在<head></head>里面就可以了
详细出处参考：http://www.jb51.net/article/431.htm
分享到：
相关推荐
然而，当Iframe的内容动态变化或者内容长度超过预设的高度时，我们就需要实现高度自适应。有几种常见的方法可以实现这一目标： 1. **JavaScript/jQuery**： 一种常见的方法是使用JavaScript或jQuery监听页面的...
为了解决这个问题，我们需要实现一个自适应高度的`iframe`，使其能根据内部内容自动调整高度。本文将深入讲解如何通过JavaScript来实现这一功能。 首先，让我们理解`iframe`的基本用法。在HTML中，创建一个`iframe`...
在实际项目中，我们需要结合这个文件的内容来完善`iframe`高度自适应的实现。 总结，使`iframe`自适应子页面内容高度主要涉及以下几个方面： 1. 同源策略：确保`iframe`加载的页面与父页面在同一域名下。 2. ...
- **CSS `padding-bottom` hack**：利用百分比`padding-bottom`可以实现IFRAME的自适应高度。设置IFRAME的`position: absolute;`和`height: 0;`，然后用`padding-bottom`设定宽高比，这样IFRAME会根据宽度自动调整...
在实际应用中，由于浏览器的同源策略限制，如果`iframe`加载的内容与包含它的页面不在同一个域下，浏览器出于安全考虑不允许获取其内容的高度，这给实现自适应高度带来了挑战。 三、解决方案 1. **JavaScript/...
在本例中，通过获取iframe内容的scrollHeight属性，可以获取到内容的实际高度，然后用这个高度来设置iframe的高度，实现高度自适应。 知识点六：跨浏览器兼容性 在实际开发中，需要考虑不同浏览器的兼容性问题。在...
在探讨“嵌入到HTML的iframe自动适应大小”的主题时，我们主要关注的是如何使一个内嵌在HTML页面中的iframe元素能够根据其内容或者父容器的尺寸动态调整自身的高度，从而实现良好的响应式设计和用户体验。...
为了解决这个问题，开发者通常需要编写特定的代码来让Iframe自适应其内容的高度。 本示例提供的是一段兼容IE、遨游、火狐等浏览器的Iframe自适应高度的JavaScript代码。这段代码的工作原理是通过JavaScript定时器...
因此，我们需要一个机制来实时检测`iframe`内部页面的高度，并动态调整`iframe`及父页面的高度，以实现自适应显示。 ### 3. 实时高度检测的实现 实现这一功能通常需要两部分代码：一部分在`iframe`内部，一部分在父...
实现高度自适应的关键在于pym.js的`parentHeight`方法，它会发送一个消息到父页面，告知其当前iframe内容区域的高度，父页面接收到消息后，可以据此调整iframe的高度。 接下来是li标签的切换功能。在HTML中，li是...
为解决这个问题，我们可以实现IFrame的自动伸展，使其高度能动态适应内部内容的高度，从而避免滚动条的出现。 动态改变IFrame高度的实现主要分为两种方法： **具体实现一：** 1. **JavaScript实现** 在IFrame子...
在网页开发中，`iframe`（Inline Frame）是一种嵌入式框架，用于在单个HTML文档中嵌入另一个HTML文档，常用于实现页面组件的复用或者加载外部内容。本主题探讨的是如何处理`iframe`多层级时的高度自适应问题，以确保...
总结来说，这个示例展示了如何利用JavaScript实现Iframe的高度自适应。当Iframe内容发生变化或加载完成后，通过`SetCwinHeight`函数动态计算并设置Iframe的高度，确保内容完全可见，无需用户滚动。这种方法对于创建...
3. iframe（嵌入式帧）自适应高度： `iframe`用于在网页中嵌入另一个网页，但有时需要确保其高度自适应内容。例如： ```html <iframe name="guestbook" src=...
iframe高度自适应于父页面 有时候我们需要让`iframe`的高度适应父页面的剩余空间，这可以通过监听窗口的`resize`事件实现： ```javascript $(window).resize(function () { var webheight = document.body....
它通过动态调整iframe的大小来实现内容自适应，并提供了安全的跨域通信机制，使得不同源的网页可以在彼此之间交换信息。 **一、Pym.js 的主要功能** 1. **动态调整iframe大小**：Pym.js 的核心功能是能够根据...
jQuery mediaWrapper是一个用于打包制作iframe的插件，而在开发自适应网站时，嵌入式视频的行为更像图像。 当前，iframe将默认设置为嵌入代码设置的任意宽度。 该插件非常简单，它将iframe包裹在相对放置的容器中...
例如，可以根据用户的设备类型（PC或移动设备）自适应调整`<iframe>`的尺寸；或者根据用户的访问记录推荐相关的BIM模型。 综上所述，三维展示BIM模型与PHP嵌套标签技术的结合不仅可以有效地提高网站的交互性和功能...