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;
    //使用的是contentWindow
    const childWindow = myIframe?.contentWindow;
    //自定义发送的数据格式
    const dataJson = {
      message: {  data, },
    };
    //子Iframe的地址
    let targetUrl = baseUrl;
   //使用的是childWindow
    childWindow?.postMessage(JSON.stringify(dataJson), targetUrl);
    console.log('sendMessage Successful');
  };

子Iframe发送给父页面

export const postMessage = (key, data) => {
  const dataJson = {
    message: {  data,},
  };
  let targetUrl = myTargetUrl
  //使用window.parent
   window.parent?.postMessage(JSON.stringify(dataJson), targetUrl);
   console.log('sendMessage Successful');
}

原文地址：https://blog.csdn.net/weixin_46361785/article/details/142496951

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！