iframe微前端解决方案

利用iframe+响应式+message事件可以实现全系统数据交互，一定程度上解决使用微前端框架的心智负担。

iframe 父子页面接发内容如下：

1. 父页面

<template>
  <iframe ref="iframeRef" src="iframeSrc" />
</template>

<script setup>
import { ref, onMounted, onUnmount } from 'vue';

const iframeSrc = ref('http://www.xxx.com/page');
const iframeRef = ref(null);

// 接收来自 iframe 的消息
const getMessage = (event) => {
  // 自定义 messageType 标识哪类消息
  const { messageType, data } = event.data;  
  
  // 判断 messageType 来辨别哪类消息做相应判断
};

// 向 iframe 发送消息
const sendMessage = ({ messageType, data, iframeSrc }) => {
    const element = iframeRef.value;
    if(!element) return;
    element.contentWindow.postMessage({
        messageType,
        data
    }, iframeSrc)
};

onMounted(() => {
  window.addEventListener('message', getMessage);
});

onUnmounted(() => {
  window.removeEventListener('message', getMessage);
});
<script>

<style lang="scss" scoped>
iframe {
  heigh: 100%;
  width: 100%;
}
</style>

2. iframe 子页面

import { useEffect } from 'react';

export default () => {

    // 接收来自 父页面 的消息
    const getMessage = (event) => {
      // 自定义 messageType 标识哪类消息
      const { messageType, data } = event.data;
      // 判断 messageType 来辨别哪类消息做相应判断
    };

    useEffect(() => {
        window.addEventListener('message', getMessage)
        return () => {
            window.removeEventListener('message', getMessage)
        }
    }, []);
    
    // 发送消息到 父页面
    const sendMessage = () => {
        window.parent.postMessage({ messageType: '', data: {} })
    };

    return <>
        <button onClick="sendMessage">向父页面发送消息</button>
    <>
};