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

<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>