Iframe窗口通信
在组件中使用Iframe，只需要传入src即可。
<iframe id="myIframe" style={{ width: '100%', height: '100%', border: 'none' }} src={src} />
想要与Iframe通信，需要监听message来接收消息。
window.addEventListener('message', receiveMessage);
父页面和子Iframe都是一样的接收方法
// 接收const receiveMessage = (event: any) => {// 判断来源，过滤别的窗口发送的消息，event是发送时定义的数据if (event.origin === baseUrl) {let params: any = event.data || '{}';console.log('receiveMessage Successful', params);}};
发送时，父页面发送给子Iframe
// 发送const postMessage = (key: string, data: object) => {const myIframe = document.getElementById('myIframe') as HTMLIFrameElement;if (!myIframe) return;//使用的是contentWindowconst childWindow = myIframe?.contentWindow;//自定义发送的数据格式const dataJson = {message: { data, },};//子Iframe的地址let targetUrl = baseUrl;//使用的是childWindowchildWindow?.postMessage(JSON.stringify(dataJson), targetUrl);console.log('sendMessage Successful');};
子Iframe发送给父页面
export const postMessage = (key, data) => {const dataJson = {message: { data,},};let targetUrl = myTargetUrl//使用window.parentwindow.parent?.postMessage(JSON.stringify(dataJson), targetUrl);console.log('sendMessage Successful');
}