Iframe 高度自适应的一些解决方法

方法一：使用 window.resizeTo() 方法如果 iframe 中的内容与主页面处于同一域名下，那么可以在 iframe 中动态获取内容高度，并将高度传递给主页面，从而实现高度自适应。具体实现方法如下：

<iframe id="myIframe" src="iframe.html"></iframe>


// 获取 iframe 元素
const iframe = document.getElementById('myIframe');


// 根据 iframe 内容高度设置 iframe 高度
function resizeIframe() {
  const iframeDocument = iframe.contentDocument;
  const iframeContent = iframeDocument.getElementById('content');
  iframe.style.height = iframeContent.offsetHeight + 'px';
  window.resizeTo(iframe.offsetWidth, iframe.offsetHeight);
}


// 监听 iframe 内容加载完成事件，并执行高度自适应
iframe.onload = resizeIframe;


上面的代码中，resizeIframe() 函数会在 iframe 的内容加载完成后被调用。该函数会动态获取 iframe 内容的高度，然后将高度设置为 iframe 的高度，并调用 window.resizeTo() 方法将主页面的大小设置为 iframe 的大小。由于 resizeTo() 方法需要在主页面中调用，因此在 resizeIframe() 函数中需要将 iframe 的高度传递给主页面。

方法二：使用 postMessage() 方法如果 iframe 中的内容与主页面处于不同的域名下，那么不能直接访问 iframe 中的内容。这种情况下，可以使用 postMessage() 方法来实现跨域通信，从而动态调整 iframe 的高度。具体实现方法如下：

<iframe id="myIframe" src="https://example.com"></iframe>


// 获取 iframe 元素
const iframe = document.getElementById('myIframe');


// 监听消息事件
window.addEventListener('message', (event) => {
  if (event.origin === 'https://example.com') {
    // 获取消息中的高度数据
    const height = parseInt(event.data);


    // 将高度设置为 iframe 的高度
    iframe.style.height = height + 'px';
  }
});


// 发送消息给 iframe，请求其高度信息
iframe.contentWindow.postMessage('getHeight', 'https://example.com');


上面的代码中，当 iframe 中的内容加载完成后，主页面会向 iframe 发送一条消息，请求其高度信息。iframe 收到消息后，会将自己的高度信息通过 postMessage() 方法传递给主页面。主页面通过监听 message 事件来接收消息，并根据消息中的高度信息动态调整 iframe 的高度。