iframe 内嵌跨域页面如何做到高度自适应

场景描述：

        parent.html 页面中通过iframe内嵌children.html页面，且children.html 页面高度是动态变化的，此时需要parent.html中的iframe的高度自适应children.hml 的高度，避免出现滚动条., 解决方法分为以下两步

1，parent.html 中通过iframe 内嵌children.html 页面,监听message 消息，接收返回参数设置iframe 的高度

// my-src 对应的是childrem.html 页面的地址
<iframe
      ref="iframeRef"
      license="xxxx"
      width="100%"
      class="iframe-msg-content"
      src="my-src"
      frameborder="0"
    ></iframe>
    <script setup>
    import {onMounted, onUnmounted} from 'vue';
    
    const handleMessage = (event: MessageEvent) => {
      if (Object.prototype.toString.call(event.data) === '[object String]') {
        // 过滤来自webPack发送的possMessage 消息
        const message = JSON.parse(event.data);
        if (message?.type === 'HEIGHT') {
          // 设置iframe 的高度
          iframeRef.value.style.height = message.data.height + 'px';
        }
      }
    };
    onMounted(()=>{
      window.addEventListener('message', handleMessage, false);
    });
   
    onUnmounted(() => {
      window.removeEventListener('message', handleMessage, false);
    });
    </script>
    
    // 先给一个默认的宽高
    .iframe-msg-content{
    width: 100%;
    height: 400px
    }

 2，在children.html 页面中监听自身最外层标签的尺寸变化，并将变化后的尺寸发送给parent.html页面

// child.html最外层元素 .page-container
<div class="page-container" ref="pageContainer"></div>

<script setup lang="ts">
import {ref,reactive, onMounted, onUnmounted} from "vue";
const pageContainer = ref();
const state = reactive({
     resizeObserve: null as ResizeObserver|null,
})

onMounted(()=>{
    nextTick(() => {
        if (!state.resizeObserve) {
          state.resizeObserve = new ResizeObserver((entires) => {
            for (const entry of entires) {
              if (entry.target === pageContainer.value) {
                const message = {
                  type: 'HEIGHT',
                  data: {
                    height: pageContainer.value?.offsetHeight,
                  },
                };
                // 此时监听统计图dom尺寸的改变，重载统计图
                window.parent.postMessage(JSON.stringify(message), 'ip+端口');
              }
            }
          });
        }
        state.resizeObserve.observe(pageContainer.value as any);
      });
})
</script>