react不同项目中使用iframe进行通信

父页面:

1.react组件里面需要iframe标签:

<Modal title={'公告列表弹窗'} className={xxx} visible={xxx}
  mask={true} bodyStyle={historyNoticeBodyStyle}
  onCancel={() => {xxx}} maskClosable={false} 
  footer={[]} centered={true}
>
   <>
    公告详情弹窗--略...
    <iframe className={styles.routerIframe} src={mySrc} id="xxx" frameBorder="0" />
    </>
</Modal>

2.页面初始化时:

useEffect(() => {
    previewAddEvent();
}, [初始化依赖数据条件略...]);

// 获取弹窗数据和判断是否出现弹窗
const showModalCb = (data) => {
        if (data.data) {
            try {
                const jsonParse = JSON.parse(data.data)
                if (jsonParse && jsonParse.postType === 'preview') {
                    // 点击iframe内容后出现的公告详情弹窗
                    setPopData(xxx); // 获取弹窗内容--略
                    setHistoryModalShow(true);
                }
                if (jsonParse && jsonParse.postType === 'previewStyle') {
                    // 子页面传递页面高度等样式, 将高度赋值给公告列表弹窗的内容高度, 实现自适应高度
                    jsonParse.scrollHeight && setHistoryNoticeBodyStyle({
                        ...historyNoticeBodyStyle,
                        height: jsonParse.scrollHeight+50
                    })
                }
            } catch (e) { }
        }
    }

    // iframe通信
    const previewAddEvent = () => {
        const domI: any = window;
        // 监听message事件
        try {
            if (domI.addEventListener) {
                domI.addEventListener('message', (data) => { showModalCb(data) }, false)
            } else {
                domI.attachEvent('onmessage', (data) => { showModalCb(data) })
            }
        } catch (err) {
            console.log(err)
        }
    }

子页面:

1.其实是利用iframe传递数据给上面父页面(非同一个项目), 相当于一个公共组件

// 1.当获取数据后:
const item = Object.assign({}, { postType: 'preview' }, item, res?.data?.result);
              window.parent.postMessage(JSON.stringify(item), '*');   

// 2.aaaaa是数据填充完后, 根据该元素找到他的父元素, 该父元素的id是aaaaa; 注意数据变化要重新iframe通信传递那时的元素高度
 window.parent.postMessage(
              JSON.stringify({
                postType: 'previewStyle',
                scrollHeight: document.getElementById('aaaaa')?.scrollHeight
              }),
              '*'
            );