iframe怎么根据内容自适应高度

要根据内容自适应iframe的高度，可以使用以下方法：

1. 使用JavaScript动态调整iframe的高度。

• 在父页面中，使用JavaScript获取到iframe元素。

• 监听iframe的加载事件或者内容改变事件。

• 在事件触发时，使用JavaScript获取到iframe内容的高度。

• 将获取到的高度赋值给iframe的height属性。

示例代码如下：

<script>
function resizeIframe() {
var iframe = document.getElementById("my-iframe");
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + "px";
}
window.addEventListener("load", resizeIframe);
window.addEventListener("resize", resizeIframe);
</script>

2. 使用PostMessage进行跨域通信。

• 在iframe的内容页中，使用JavaScript获取到内容的高度。

• 使用PostMessage方法将高度信息发送给父页面。

• 在父页面中，使用JavaScript监听PostMessage事件，并根据接收到的高度信息动态调整iframe的高度。

示例代码如下：

在iframe的内容页中：

<script>
function sendHeight() {
var height = document.body.scrollHeight;
parent.postMessage(height, "*");
}
window.addEventListener("load", sendHeight);
window.addEventListener("resize", sendHeight);
</script>

在父页面中：

<script>
window.addEventListener("message", function(event) {
if (event.origin !== "http://example.com") return; // 可选的安全验证
var height = parseInt(event.data);
var iframe = document.getElementById("my-iframe");
iframe.style.height = height + "px";
});
</script>

以上是两种常用的方法，可以根据具体情况选择适合的方式实现iframe的自适应高度。