调整iframe宽度高度符合含量

在前端开发中，我们经常会使用 <iframe> 标签来嵌入其他页面或者展示外部内容。但是，由于 iframe 与父页面之间存在跨域限制，所以在调整 iframe 的宽度和高度时可能会遇到一些问题。本文将介绍如何通过 JavaScript 来动态调整 iframe 的宽度和高度，使其自适应内容大小，并提供示例代码和实际应用场景。

获取 iframe 内容高度

要动态调整 iframe 的高度，我们需要先获取 iframe 内容的高度。可以使用以下 JavaScript 代码获取：

const iframe = document.getElementById('my-iframe');
const contentHeight = iframe.contentWindow.document.body.scrollHeight;

该代码通过 contentWindow 属性获取了 iframe 的窗口对象，进而通过 document.body.scrollHeight 属性获取了 iframe 内容的高度。

调整 iframe 高度

获取到 iframe 内容的高度后，我们可以通过以下代码来动态调整 iframe 的高度：

iframe.style.height = contentHeight + 'px';

该代码将 iframe 的高度设置为内容的高度加上单位像素（px）。

自适应 iframe 宽度

调整 iframe 的宽度稍微复杂一些，因为我们不仅需要考虑 iframe 内容的宽度，还需要考虑父页面的宽度。以下是一个自适应 iframe 宽度的示例代码：

function adjustIframeWidth() {
  const iframe = document.getElementById('my-iframe');
  const contentWidth = iframe.contentWindow.document.body.scrollWidth;
  const parentWidth = iframe.parentNode.offsetWidth;
  iframe.style.width = Math.max(contentWidth, parentWidth) + 'px';
}

window.addEventListener('resize', adjustIframeWidth);

该代码定义了一个 adjustIframeWidth 函数，在窗口大小改变时可以自动调整 iframe 的宽度。该函数通过 contentWindow 属性获取了 iframe 的窗口对象，进而通过 document.body.scrollWidth 属性获取了 iframe 内容的宽度。另外，该函数还使用了 parentNode 属性获取了 iframe 的父元素（即包含 iframe 的元素）的宽度，并将 iframe 的宽度设置为内容宽度和父元素宽度中的最大值。

应用场景

自适应 iframe 宽度和高度的方法在实际应用中非常有用。例如，我们可以将一个包含表格或者图表的页面嵌入到另一个页面中，使用户可以方便地查看数据和统计信息。当然，如果被嵌入页面的内容比较复杂，可能会出现加载时间过长等问题，需要根据实际情况进行优化。

总结

本文介绍了如何通过 JavaScript 来动态调整 iframe 的宽度和高度，使其自适应内容大小。如果您需要在实际应用中使用 iframe，可以结合示例代码进行实现。同时，需要注意 iframe 与父页面之间的跨域限制，以及被嵌入页面的加载时间等问题。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8934