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的自适应高度。