window.postMessage
window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为 https），端口号（443 为 https 的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。
子传父
<pre>
import React, { useEffect } from 'react';
const Index = () => {
useEffect(() => {
window.addEventListener('message', function (event) {
if (event.data == 'close') {
console.log('获取到子应用传递过来的值');
console.log(event);
}
});
}, []);
return (
<div>
<iframe src="http://10.1.38.13:8001" width={800} height={800}></iframe>
</div>
);
};
export default Index;
<pre>/
父传子
```import React, { useEffect, useRef } from 'react';
import styles from './index.less';
import request from '@/utils/request';
const index: React.FC = () => {
const createIframe = (src: string, element: string, v: object) => {
const token = window.localStorage.getItem('currentAccess');
const params = { Authorization: `Bearer ${token}`, level: v.level };
// 在此元素上添加iframe
const childFrameObj: any = document.getElementById(element);
const iframe: any = document.createElement('iframe');
iframe.src = src;
childFrameObj.appendChild(iframe);
// 判断iframe是否加载完成
if (iframe.attachEvent) {
iframe.attachEvent('onload', () => {
iframe.contentWindow.postMessage(params, '*');
});
} else {
iframe.onload = () => {
iframe.contentWindow.postMessage(params, '*');
};
}
};
const CRFGetRequest = () => {
request.get('/*/crf/user/get_userInfo').then((res) => {
createIframe(
'传入的URL',
'calculation',
需要传入的参数,
);
});
};
useEffect(() => {
CRFGetRequest();
}, []);
return (
<div className={styles.iframe}>
<div id="calculation"> </div>
</div>
);
};
export default index;```
