实现Web自适应高度的IFrame技巧

在Web开发中，利用IFrame实现自适应高度是一项常见的需求，尤其是在构建跨域内容嵌入或者页面布局时。IFrame（Inline Frame）允许网页嵌入其他网页内容，但默认情况下，其高度通常是固定的，无法根据嵌入内容的高度动态调整。本文将介绍几种不同的方法来实现IFrame的高度自适应。 第一种方法：直接设置高度 为了使IFrame的高度根据其内容动态调整，可以采用简单的方法，即在IFrame外部添加一个包裹容器，并使用JavaScript来监听IFrame加载完成后的高度变化。下面的代码示例展示了如何在IFrame加载完成后获取并设置其body的滚动高度： ```html <div> <iframe id="dingbu" name="dingbu" width="100%" onload="this.height=dingbu.document.body.scrollHeight" frameborder="0" src="spms/01.shtml"></iframe> </div> ``` 在JavaScript函数`SetWinHeight(obj)`中，检查浏览器是否支持`getElementById`，然后根据支持情况分别处理`contentDocument`或`Document`对象，确保获取到正确的滚动高度，并将其赋值给IFrame的`height`属性。 第二种方法：利用onload事件 另一种方法是通过在IFrame标签中设置`onload`属性，当IFrame加载完成后，调用预定义的JavaScript函数来更新高度。例如： ```html <iframe width="778" align="center" height="200" id="win" name="win" onload="Javascript:SetWinHeight(this)" frameborder="0" scrolling="no" src="1.htm"></iframe> ``` 这里，`SetWinHeight(this)`会在IFrame加载完成后执行，动态设置IFrame的高度。 经典案例：使用全局函数 为了进一步简化代码并增强兼容性，可以创建一个通用的全局函数，如`iFrameHeight()`，在HTML和JavaScript代码中都引用这个函数。如下所示： ```html <iframe src="http://www.fufuok.com/" id="iframepage" name="iframepage" frameborder="0" scrolling="yes" width="100%" onLoad="iFrameHeight()"></iframe> ``` ```javascript <script> function iFrameHeight() { var iframe = document.getElementById('iframepage'); if (iframe) { iframe.height = iframe.contentDocument.body.scrollHeight; } } </script> ``` 这段代码会在所有现代浏览器（IE6/IE7/IE8、Firefox、Opera、Chrome、Safari等）上工作，因为它们都有相应地支持`getElementById`和`contentDocument`。 总结来说，实现IFrame的自适应高度主要依赖于JavaScript，通过监听IFrame的加载事件或者直接操作其内容区域的高度属性。上述提供的代码示例可以作为实现这一功能的基础，但在实际项目中可能还需要针对特定需求进行优化和调整，比如考虑浏览器兼容性、性能优化等因素。