iframe自适应高度的解决方案汇总

"总结了iframe自适应高度的两种实用方法，包括JavaScript实现的动态调整高度以确保内容完整显示。" 在网页开发中，`iframe`（内联框架）是一种常用的技术，用于在一个页面中嵌入另一个页面。然而，由于`iframe`的大小通常是固定的，当嵌入的页面内容高度超过`iframe`设定的高度时，会出现滚动条，影响用户体验。为了解决这个问题，开发者通常会寻求使`iframe`高度自适应的方法，以便无论嵌入内容有多少，都能完整显示。 以下是两种常见的`iframe`自适应高度的方法： 1. 使用JavaScript监听`iframe`加载事件并动态调整高度： 在这个方法中，首先创建了一个`iframe`元素，并为其设置了`id`、`name`和`onLoad`属性，`onLoad`属性指向一个名为`iFrameHeight`的JavaScript函数。当`iframe`内容加载完成后，`iFrameHeight`函数会被调用，获取`iframe`的内容文档（`contentDocument`），然后计算内容的滚动高度（`scrollHeight`），并将这个高度赋值给`iframe`的`height`属性，实现自适应高度。 JavaScript代码如下： ```html <iframe src="" id="iframepage" name="iframepage" frameborder=0 scrolling=no width="100%" onLoad="iFrameHeight()"></iframe> <script type="text/javascript" language="javascript"> function iFrameHeight() { var ifm = document.getElementById("iframepage"); var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument; if (ifm != null && subWeb != null) { ifm.height = subWeb.body.scrollHeight; } } </script> ``` 2. 另一种JavaScript实现，通过传递`iframe`对象到函数中设置高度： 这个方法同样依赖于JavaScript，但处理方式略有不同。定义了一个名为`SetWinHeight`的函数，该函数接受一个参数`obj`，即`iframe`对象。函数内部根据浏览器类型和版本，判断并获取`iframe`内容的滚动高度，然后设置`iframe`的高度。 需要注意的是，`iframe`元素上需要设置`onload`属性，将`SetWinHeight`函数与`iframe`关联起来，确保在内容加载完成后自动调用此函数。 HTML代码如下： ```html <iframe width="778" align="center" height="200" id="win" name="win" onload="Javascript:SetWinHeight(this)" frameborder="0" scrolling="no" src="1.htm"></iframe> <script> function SetWinHeight(obj) { var win = obj; if (document.getElementById) { if (win && !window.opera) { if (win.contentDocument && win.contentDocument.body.offsetHeight) win.height = win.contentDocument.body.offsetHeight; else if (win.Document && win.Document.body.scrollHeight) win.height = win.Document.body.scrollHeight; } } } </script> ``` 这两种方法都是通过JavaScript动态获取`iframe`内容的高度，然后调整`iframe`自身的高度，从而达到自适应的效果。需要注意的是，这些方法可能在某些特定的浏览器环境中表现不一致，因此实际应用时还需要进行兼容性测试，以确保在各种浏览器中都能正常工作。