在前端开发中，我们经常需要嵌入其他网页或应用程序到我们的页面中。为了实现这个功能，我们通常使用 iframe 标签来包含外部内容。但是，由于外部内容的高度通常是不确定的，因此我们需要动态调整 iframe 的高度以适应其内容。
本文将介绍如何使用 JavaScript 和 jQuery 来自动调整 iframe 的高度，使其与内部内容匹配，并提供一个示例代码演示该过程。
1. 获取 iframe 内容高度
我们首先需要获取 iframe 中内容的高度。对于同域 iframe，我们可以使用以下代码来获取内部文档的高度：
const iframe = document.getElementById('my-iframe');
const innerDoc = iframe.contentDocument || iframe.contentWindow.document;
const innerHeight = Math.max(
innerDoc.body.scrollHeight,
innerDoc.documentElement.scrollHeight
);上面的代码首先通过 document.getElementById() 方法获取 iframe 元素，然后使用 contentDocument 或 contentWindow.document 属性获取 iframe 中的文档对象。接下来，我们使用 scrollHeight 属性来获取文档的完整高度。
值得注意的是，有些浏览器可能会返回 body 或 documentElement 中更小的高度，因此我们需要使用 Math.max() 方法来确保获取文档的正确高度。
如果 iframe 是跨域的，我们需要使用 window.postMessage() 方法来从子窗口获取内容高度。这超出了本文的范围，因此我们不再赘述。
2. 调整 iframe 高度
一旦我们获得了 iframe 内容的高度，我们可以通过以下代码将 iframe 的高度设置为其内容的高度：
const iframe = document.getElementById('my-iframe');
iframe.style.height = innerHeight + 'px';这里我们简单地设置 iframe 元素的 style.height 属性为内容高度加上 'px' 单位后的字符串值。
3. 自动调整 iframe 高度
以上方法只适用于静态页面，无法自动调整 iframe 的高度。为了实现自动调整，我们需要在 iframe 中添加一个监听器来检测其内容的变化。
-- -------------------- ---- -------
----- ------ - -------------------------------------
-------- -------------- -
----- -------- - ---------------------- -- ------------------------------
----- ----------- - ---------
---------------------------
-------------------------------------
--
------------------- - ----------- - -----
-
------------------------------- --------------上面的代码定义了一个名为 onIframeLoad 的函数，并将其作为 load 事件的回调函数添加到 iframe 元素上。当 iframe 中的内容加载完成时，该函数会被触发，然后通过前面介绍的代码来调整 iframe 的高度。
现在，当我们访问包含 iframe 元素的页面时，iframe 的高度将自动调整以适应其内容的高度。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
------------- ------ ------ -- ---------------
-------
------
---------- ---------
------- -------------- --------------------------
--------
----- ------ - -------------------------------------
-------- -------------- -
----- -------- - ---------------------- -- ------------------------------
----- ----------- - ---------
---------------------------
-------------------------------------
--
------------------- - ----------- - -----
-
------------------------------- --------------
---------
-------
-------<!-- child.html -->
<!DOCTYPE html>
<html>
<head>
<title>Child
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/12687) ，转载请注明来源
[https://www.javascriptcn.com/post/12687](https://www.javascriptcn.com/post/12687)