如何通过postMessage让iframe自适应高度？

前端

2024-02-18 22:50:04

利用postMessage让iframe自适应高度，解决滚动框问题

什么是iframe

Iframe（内联框架）是一种HTML元素，允许您将另一个网页嵌入到当前网页中。它就像一个窗口，让您可以在当前网页中显示来自不同域的网页内容或其他媒体文件，如视频、音乐等。

滚动框问题

当iframe中的内容高度超过父页面指定的宽高时，会出现一个滚动框。这可能会影响网页的视觉美观和用户体验。

postMessage解决方案

为了解决滚动框问题，我们可以利用HTML5中的postMessage方法。postMessage允许两个窗口之间进行通信，包括iframe和父页面。

postMessage的应用

我们可以利用postMessage让iframe监听来自父页面的消息。当收到消息时，iframe会自动调整自身高度，以适应其内部内容的高度。

实现步骤

iframe中：

添加一个监听器，监听来自父页面的postMessage消息。
当接收到消息时，调整iframe的高度，以适应内部内容的高度。

父页面中：

发送postMessage消息给iframe，通知其调整高度。

代码示例

iframe.html（iframe内容页面）：

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

<script>
  const iframe = document.getElementById('iframe');

  // 监听来自父页面的postMessage消息
  iframe.addEventListener('message', (event) => {
    if (event.data === 'adjustHeight') {
      // 调整iframe的高度，以适应内部内容的高度
      iframe.style.height = event.target.contentDocument.body.scrollHeight + 'px';
    }
  });
</script>

index.html（父页面）：

<script>
  const iframe = document.getElementById('iframe');

  // 发送postMessage消息给iframe，通知其调整高度
  iframe.contentWindow.postMessage('adjustHeight', '*');
</script>