`

iframe 高度自适应

 
阅读更多

通过Google搜索iframe 自适应高度，结果5W多条，搜索iframe 高度自适应，结果2W多条。
我翻了前面的几十条，刨去大量的转载，有那么三五篇是原创的。而这几篇原创里面，基本上只谈到如何自适应静的东西，就是没有考虑到JS操作DOM之后，如何做动态同步的问题。另外，在兼容性方面，也研究的不彻底。

这篇文章，希望在这两个方面再做一些深入。

可能有人还没接触到这个问题过，先说明一下，什么是高度自适应吧。所谓iframe高度自适应，就是，基于界面美观和交互的考虑，隐藏了 iframe的border和scrollbar，让人看不出它是个iframe。如果iframe始终调用同一个固定高度的页面，我们直接写死 iframe高度就可以了。而如果iframe要切换页面，或者被包含页面要做DOM动态操作，这时候，就需要程序去同步iframe高度和被包含页的实 际高度了。

顺便说下，iframe在迫不得已的时候才去用，它会给前端开发带来太多的麻烦。

传统做法大致有两个：
方法一，在每个被包含页在本身内容加载完毕之后，执行JS取得本页面的高度，然后去同步父页面的iframe高度。
方法二，在主页面iframe的onload事件中执行JS，去取得被包含页的高度内容，然后去同步高度。
在代码维护角度考虑，方法二是优于方法一的，因为方法一，每个被包含页都要去引入一段相同的代码来做这个事情，创建了好多副本。

两个方法都只处理了静的东西，就是只在内容加载的时候执行，如果JS去操作DOM引起的高度变化，都不太方便。

如果在主窗口做一个Interval，不停的来获取被包含页的高度，然后做同步，是不是即方便，又解决了JS操作DOM的问题了呢？答案是肯定的。

Demo页面：主页面 iframe_a.html ，被包含页面 iframe_b.htm 和 iframe_c.html

主页面代码示例：

<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0"></iframe><script type="text/javascript">
function reinitIframe(){
var iframe = document.getElementById("frame_content");
try{
iframe.height =  iframe.contentWindow.document.documentElement.scrollHeight;
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
</script>

一直执行，效率会不会有问题？
我做了测试，同时开5个窗口（IE6、IE7、FF、Opera、Safari）执行这个代码，不会对CPU有什么影响，甚至调整到2ms，也没影响（基本维持在0%占用率）。

下面谈谈各浏览器的兼容性问题，如何获取到正确的高度，主要是对body.scrollHeight和 documentElement.scrollHeight两个值得比较。注意本文用的是这个doctype，不同的doctype应该不会影响结果，但 是假如你的页面没有申明doctype，那还是先去加一个吧。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

在主页面追加以下测试代码，以输出这两个值，代码示例：

<div><button >Check Height</button></div><script type="text/javascript">
function checkHeight() {
var iframe = document.getElementById("frame_content");
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
alert("bHeight:" + bHeight + ", dHeight:" + dHeight);
}
</script>

被加载页面，可以切换一个绝对定位的层，来使页面高度动态改变。如果层展开，则会撑高页面高度。代码示例：

<div><button >Toggle Overlay</button>
</div>
<div style="height:160px;position:relative">
<div id="overlay" style="position:absolute;width:280px;height:280px;display:none;"></div>
</div>
<script type="text/javascript">
function toggleOverlay() {
var overlay = document.getElementById('overlay');
overlay.style.display = (overlay.style.display == 'none') ? 'block' : 'none';
}
</script>

下面列出以上代码在各浏览器的测试值：
（bHeight = body.scrollHeight, dHeight = documentElement.scrollHeight, 红色 = 错误值, 绿色 = 正确值）

/ 层隐藏时 层展开时 bHeight dHeight bHeight dHeight
IE6 184 184 184 303
IE7 184 184 184 303
FF 184 184 184 303
Opera 181 181 300 300
Safari 184 184 303 184

暂且无视Opera比别人少3像素的问题…可以看出，如果没有绝对定位的东西，两个值是相等的，取哪个都无所谓。
但是如果有，那么各个浏览器的表现不太相同，单取哪个值都不对。但可以找到了一条规律，那就是取两个值得最大值可以兼容各浏览器。所以我们的主页面代码就要改造成这样了：

function reinitIframe(){var iframe = document.getElementById("frame_content");
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);

这样子，基本解决了兼容性问题。顺便说下，不光绝对定位的层会影响到值，float也会导致两个值的差异。

如果你演示Demo后，会发现，除了IE，其他浏览器中，当层展开后再隐藏，取到的高度值还是维持在展开的高度303，而非隐藏回去的真正值 184，就是说长高了之后缩不回去了。这个现象在不同被包含页面之间做切换也会发生，当从高的页面切换到矮页面的时候，取到的高度还是那个高的值。
可以归纳为，当iframe窗体高度高于文档实际高度的时候，高度取的是窗体高度，而当窗体高度低于实际文档高度时，取的是文档实际高度。因此，要想办法在同步高度之前把高度设置到一个比实际文档低的值。所以，在iframe的添加 /> 这个值，在实际应用中决定，足够矮但又不能太矮，否则在FF等浏览器里会有很明显的闪烁。DOM操作的时候主页面无法监听到，只能DOM操作完了之后把高度变小了。
在我的一个实际项目中，在成本和收益之间权衡，我并没有做这个事情，因为每个DOM函数中都要插入这个代码，代价太高，其实层缩回去不缩掉也不是那么致命。包括Demo里，也没有去做这个事情。如果读者有更好的方法，请告诉我。

这是最终的主页面的代码：

<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0" ></iframe>
<script type="text/javascript">
function reinitIframe(){
var iframe = document.getElementById("frame_content");
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);
</script>

附Demo页面： 主页面 iframe_a.html ，被包含页面 iframe_b.htm 和 iframe_c.html
（转帖）

分享到：
| [转]翻译：有点高级的JavaScript面向对象 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Iframe 高度自适应，js控制Iframe 高度自适应.docx

    "Iframe 高度自适应，js 控制 Iframe 高度自适应" Iframe 高度自适应是指在网页中嵌入的 iframe 元素能够根据其内容自动调整高度，以适应不同的浏览器和屏幕尺寸。js 控制 Iframe 高度自适应是指使用 JavaScript ...

    Iframe 高度自适应浏览器高度

    这种技术常被用来实现...以上就是关于“Iframe高度自适应浏览器高度”的主要知识点，实践中可能需要结合具体场景和需求选择合适的方法。在实际应用中，还要考虑到兼容性问题，确保在不同浏览器和设备上都能正常工作。

    iframe高度自适应代码及演示页面

    iframe高度自适应代码及演示页面。 适合新手，用到iframe，并且需要高度自适应的人士。 老手自动绕行，又没什么技术含量。。。 解压之后，打开iframe-auto.html之后查看效果. 如果不能查看，检查是否允许执行js

    iframe高度自适应

    ### iframe高度自适应知识点详解 在网页开发过程中，经常会遇到需要将一个页面嵌入到另一个页面中的场景，这时就会用到`&lt;iframe&gt;`标签。然而，默认情况下，`&lt;iframe&gt;`的高度是固定的，当其内部内容发生变化时，可能...

    iframe高度自适应.pdf

    ### iframe高度自适应技术详解 在网页开发过程中，经常会遇到需要在一个页面中嵌入另一个页面的需求，这通常通过HTML的`iframe`元素实现。然而，一个常见的问题是当嵌入的内容高度变化时，如何使`iframe`的高度能够...

    jsp页面iframe高度自适应的js代码.docx

    jsp 页面 iframe 高度自适应的 js 代码详解 jsp 页面 iframe 高度自适应的 js 代码是指在 jsp 页面中使用 iframe 元素，並且使其高度能够自适应内容的高度。这种技术在实际应用中非常有用，例如在某些网页中，我们...

    iframe页面的高度iframe高度自适应

    iframe包含的页面的高度，兼容性好，iframe高度自适应

    用jquery实现iframe高度自适应实例代码完美兼容多数浏览器

    用jQuery实现iframe高度自适应 &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; $(document).ready(function() { function resizeIframe() { var iframe = $('#myIframe'); if ...

    iframe高度自适应 js

    ### iframe高度自适应JS知识点详解 #### 一、概述 在网页开发中，经常会遇到需要将一个页面嵌入到另一个页面中的场景，这时就需要用到`&lt;iframe&gt;`标签。但是，默认情况下，`&lt;iframe&gt;`的高度是固定的，这往往会导致...

    iframe内容高度 iframe自适应高度终极解决Iframe设置高度后无法缩小问题

    然而，`&lt;iframe&gt;`的高度自适应问题常常困扰着开发者，尤其是当`&lt;iframe&gt;`内部的内容动态加载或者变化时，如何让`&lt;iframe&gt;`自动调整其高度以适应内容，而不会导致滚动条溢出或内容被截断，成为了一个常见需求。...

    iFrame高度自适应终极解决方案（兼容IE7,8,9 Firefox3.6+,Chrome 12+）

    "iFrame高度自适应终极解决方案（兼容IE7,8,9 Firefox3.6+,Chrome 12+）"这个标题所指向的，就是一种跨浏览器的策略，确保iFrame内容无论何时更新，都能自动调整其高度，从而避免滚动条的出现和内容溢出。...

    完整可行、浏览器兼容、通过测试的Iframe高度自适应程序

    1. **Iframe高度自适应原理** - 通常，Iframe的高度是由其内容决定的，但浏览器默认并不会自动更新其高度以适应内容的变化。为了解决这个问题，我们需要编写JavaScript代码来检测Iframe内部页面的加载状态，并根据...

    可编辑iframe高度自适应（编辑器所见即所得模式）

    标题提到的“可编辑iframe高度自适应”问题，主要涉及如何确保`iframe`的高度能根据其内容动态调整，从而提供良好的用户体验，避免滚动条的出现或页面布局的混乱。`iframe`高度自适应是解决这个问题的关键技术。 ...

    Iframe高度自适应（兼容IE/Firefox、同域/跨域）

    "Iframe高度自适应（兼容IE/Firefox、同域/跨域）"这一主题是关于如何让内嵌在Iframe中的页面能够根据其内容动态调整自身的高度，确保在不同浏览器（如IE和Firefox）以及处理同域和跨域情况时都能正常显示。...

    iframe高度自适应，多浏览器兼容

    `iframe`的使用涉及到许多关键点，尤其是高度自适应和多浏览器兼容性，这在实际项目中至关重要。本篇文章将详细讲解如何实现`iframe`的高度自适应以及在不同浏览器之间的兼容性处理。 一、`iframe`基本使用 `iframe...

    iframe自动适应高度（完美自适应高度嵌套代码），兼容目前主流浏览器。

    标题提到的“iframe自动适应高度（完美自适应高度嵌套代码）”提供了一个解决方案，它能够确保`iframe`在各种主流浏览器中都能正确地自适应内容高度，包括360浏览器、IE6-9、遨游、火狐以及搜狗浏览器。 在传统的`...

    js实现iframe自适应高度

    这个简单的JavaScript解决方案能帮助我们实现`iframe`的高度自适应，使得内容始终完全显示，避免滚动条的出现。然而，实际应用中可能还会遇到其他复杂情况，如延迟加载、动态插入的`iframe`等，这时可能需要结合更多...

    iframe跨域自适应高度模板

    同时，`iframe`内容的动态加载可能使得其高度不固定，如果不能自适应高度，可能会导致页面布局出现问题。本模板将介绍如何处理`iframe`的跨域和自适应高度这两个关键问题。 首先，让我们了解`iframe`跨域。由于同源...

Magicbox
Global site tag (gtag.js) - Google Analytics