React 使用postMessage获取iframe内容高度完成自适应(不设置高度) react函数组件实现

React 中使用 `postMessage` 获取 iframe 内容高度并实现自适应的高度调整，通常适用于父子组件之间的通信，因为 iframe 的内容是在另一个域下，所以需要通过这个跨域通信的方式获取信息。

以下是基本步骤和示例：

1. **父组件（包含 iframe）**:

import React, { useEffect } from 'react';

function ParentComponent() {
  const [iframeHeight, setIframeHeight] = useState(0);

  // 当 iframe 内部内容加载完毕后，监听事件更新高度
  useEffect(() => {
    const iframe = document.getElementById('myIframe');
    if (iframe && iframe.contentWindow) {
      iframe.onload = function () {
        iframe.contentWindow.postMessage({ type: 'getFrameHeight' }, '*'); // 发送消息请求高度
      };
      return function cleanup() {
        iframe.onload = null;
      };
    }
  }, []);

  // 接收 iframe 回应的高度
  const handleResponse = (event) => {
    if (event.origin !== '*' || event.data.type === 'frameHeight') {
      setIframeHeight(event.data.height);
    }
  };

  window.addEventListener('message', handleResponse, false);

  return (
    <div>
      <iframe id="myIframe" src="http://child-domain.com"></iframe>
      {/* 根据 iframe 高度动态调整外部元素 */}
      <div style={{ height: `${iframeHeight}px` }}>Iframe Content</div>
    </div>
  );
}

export default ParentComponent;

2. **子组件（iframe页面）**:

// 这部分在 iframe 的同源环境中运行
window.addEventListener('message', (event) => {
  if (event.origin === location.origin && event.data.type === 'getFrameHeight') {
    // 计算 iframe 的实际高度
    let height = yourContentElement.offsetHeight; // 替换为实际内容元素
    event.source.postMessage({ type: 'frameHeight', height }, location.origin); // 回传高度给父页面
  }
});

/* 其他子组件内容 */