根据内容调整 iframe 的大小

在前端开发中，经常会用到 iframe 标签来嵌入其他网页。但是由于嵌入的内容大小不一，导致 iframe 的大小难以预测和控制。本文将介绍如何根据内容调整 iframe 的大小。

方法一：使用 postMessage

通过 postMessage 方法，可以在嵌入的内容中发送消息到包含 iframe 的页面中，告诉它自己的高度。从而在包含 iframe 的页面中调整 iframe 的大小。

第一步：嵌入页面中发送消息

在嵌入的页面中，可以通过以下代码向包含 iframe 的页面发送消息：

window.parent.postMessage({
  height: document.body.scrollHeight
}, '*');

该代码将当前页面的高度通过 postMessage 方法发送到包含 iframe 的页面中。

第二步：包含 iframe 的页面接收消息

在包含 iframe 的页面中，可以通过以下代码接收来自嵌入页面的消息，并利用消息中的高度信息调整 iframe 的大小：

window.addEventListener('message', function(e) {
  if (e.origin !== 'http://example.com') {
    return;
  }

  iframe.style.height = e.data.height + 'px';
});

该代码会监听来自指定域名的 postMessage 消息，并根据消息中的高度信息调整 iframe 的高度。

方法二：利用 onload 事件

在 iframe 标签中，我们可以利用 onload 事件来监听嵌入页面的加载完成事件。并在加载完成后根据嵌入页面的高度来调整 iframe 的大小。

<iframe src="http://example.com" onload="this.style.height=this.contentDocument.body.scrollHeight+'px';"></iframe>

该代码中，当嵌入的页面加载完成后，利用 onload 事件调用函数来调整 iframe 的高度。

结论

以上两种方法都可以根据嵌入页面的内容自适应调整 iframe 的大小。其中，利用 postMessage 可以实现更加精确的调整和跨域的嵌入页面的高度获取。而利用 onload 事件则更为简单易用。

上述代码片段参考示例来源为：MDN Web Docs 和 StackOverflow。