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;```