在前端开发中，我们经常会使用 <iframe> 标签来嵌入其他页面或者展示外部内容。但是，由于 iframe 与父页面之间存在跨域限制，所以在调整 iframe 的宽度和高度时可能会遇到一些问题。本文将介绍如何通过 JavaScript 来动态调整 iframe 的宽度和高度，使其自适应内容大小，并提供示例代码和实际应用场景。
获取 iframe 内容高度
要动态调整 iframe 的高度，我们需要先获取 iframe 内容的高度。可以使用以下 JavaScript 代码获取：
----- ------ - ------------------------------------- ----- ------------- - ------------------------------------------------
该代码通过 contentWindow 属性获取了 iframe 的窗口对象，进而通过 document.body.scrollHeight 属性获取了 iframe 内容的高度。
调整 iframe 高度
获取到 iframe 内容的高度后，我们可以通过以下代码来动态调整 iframe 的高度：
------------------- - ------------- - -----
该代码将 iframe 的高度设置为内容的高度加上单位像素（px）。
自适应 iframe 宽度
调整 iframe 的宽度稍微复杂一些，因为我们不仅需要考虑 iframe 内容的宽度，还需要考虑父页面的宽度。以下是一个自适应 iframe 宽度的示例代码：
-------- ------------------- - ----- ------ - ------------------------------------- ----- ------------ - ----------------------------------------------- ----- ----------- - ------------------------------ ------------------ - ---------------------- ------------ - ----- - --------------------------------- -------------------
该代码定义了一个 adjustIframeWidth 函数，在窗口大小改变时可以自动调整 iframe 的宽度。该函数通过 contentWindow 属性获取了 iframe 的窗口对象，进而通过 document.body.scrollWidth 属性获取了 iframe 内容的宽度。另外，该函数还使用了 parentNode 属性获取了 iframe 的父元素（即包含 iframe 的元素）的宽度，并将 iframe 的宽度设置为内容宽度和父元素宽度中的最大值。
应用场景
自适应 iframe 宽度和高度的方法在实际应用中非常有用。例如，我们可以将一个包含表格或者图表的页面嵌入到另一个页面中，使用户可以方便地查看数据和统计信息。当然，如果被嵌入页面的内容比较复杂，可能会出现加载时间过长等问题，需要根据实际情况进行优化。
总结
本文介绍了如何通过 JavaScript 来动态调整 iframe 的宽度和高度，使其自适应内容大小。如果您需要在实际应用中使用 iframe，可以结合示例代码进行实现。同时，需要注意 iframe 与父页面之间的跨域限制，以及被嵌入页面的加载时间等问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/8934