### Iframe 高度自适应的实现方法
Iframe 是一种可以在网页内部嵌入另一个独立 HTML 文档的元素，它广泛应用在需要将第三方内容或应用集成到主页面中的场景。但是，Iframe 的高度自适应问题一直困扰着前端开发者，因为被嵌套页面的高度可能随着内容变化而动态变化，导致无法固定一个合理的高度。
#### 同域情况下 Iframe 高度自适应
当主页面与被嵌套的 Iframe 页面属于同一域名时，我们可以直接使用 JavaScript 来控制 Iframe 的高度。这种方法的关键在于通过 JavaScript 获得 Iframe 内页面的实际高度，并且根据这个高度动态地调整 Iframe 的 height 属性。
在同域情况下的 Iframe 高度自适应实现代码中，我们定义了一个 JavaScript 函数 `SetCwinHeight`，该函数通过获取 Iframe 内部 `document.body.offsetHeight` 或 `document.body.scrollHeight` 属性来确定内嵌页面的高度，并将这个值赋给 Iframe 的 height 属性。这个函数在 Iframe 加载完成后执行。
示例代码如下：
```javascript
function SetCwinHeight(){
var iframeid = document.getElementById("iframeid"); // 获取id为"iframeid"的iframe元素
if(document.getElementById){
if(iframeid && !window.opera){
if(iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight){
iframeid.height = iframeid.contentDocument.body.offsetHeight; // 设置高度
} elseif (iframeid.Document && iframeid.Document.body.scrollHeight){
iframeid.height = iframeid.Document.body.scrollHeight; // 设置高度
}
}
}
}
```
在 HTML 中使用这个函数时，我们可以给 Iframe 标签添加 `onload` 事件处理器，确保在页面加载完毕后执行高度调整：
```html
<iframe width="100%" id="iframeid" onload="Javascript:SetCwinHeight()" height="1" frameborder="0" src="kimi.php"></iframe>
```
#### 跨域情况下 Iframe 高度自适应
跨域问题，即不同域名下的文档之间进行交互的限制，是实现跨域 Iframe 高度自适应的关键难题。当主页面和 Iframe 页面不在同一域名时，直接通过 JavaScript 获取对方页面高度的方法会因为跨域限制而失败。
为了解决跨域问题，文中提出了使用中介页面（agent.html）来传递高度信息的解决方案。基本原理是：当用户访问主页面（main.html）时，通过 JavaScript 代码使得 Iframe 页面（iframe.html）加载完成后，JavaScript 代码再设置 Iframe 的 src 属性，将包含高度信息的 URL 发送到中介页面（agent.html），中介页面再将这个高度信息设置回主页面中的 Iframe。
该方法涉及到的三个页面的作用如下：
- `main.html`：主页面，负责加载 Iframe。
- `iframe.html`：被嵌套页面，通过 JavaScript 将自己的高度发送到中介页面。
- `agent.html`：中介页面，接收 `iframe.html` 发送的高度信息，并将其设置回 `main.html` 中的 Iframe。
通过这种代理方式，可以在不同域名的页面间实现高度信息的传递，进而实现跨域 Iframe 的高度自适应。
以下是 `main.html` 的示例代码：
```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "***">
<html xmlns="***">
<head>
<title>iframe主页面</title>
</head>
<body>
<div style="border:1px solid #ccc; padding:10px;">
<iframe id="frame_content" name="frame_content" src="iframe.html" width="100%" height="0" scrolling="no" frameborder="0"></iframe>
</div>
<!-- 尾部其他代码 -->
</body>
</html>
```
请注意，因为跨域限制，这个解决方案需要在 `iframe.html` 和 `agent.html` 中设置相应的代码来实现高度信息的传递，具体实现细节在上述代码中并未详述，但原理是通过动态修改 Iframe 的 src 属性来传递高度信息。
### 结论
无论是同域还是跨域情况下，Iframe 高度自适应都是一个较为复杂的问题。同域情况较为简单，可以使用 JavaScript 直接获取内部页面的高度并动态调整。跨域情况下则需要借助中介页面来绕过跨域限制。了解这些知识点有助于在进行 Web 开发时更好地使用 Iframe，同时也能更好地解决与之相关的兼容性问题。
