React嵌套iframe,使用postMassage进行交互

iframe是什么? 引用:MDN

window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

从广义上讲，一个窗口可以获得对另一个窗口的引用（比如 targetWindow = window.opener），然后在窗口上调用
targetWindow.postMessage() 方法分发一个 MessageEvent 消息。接收消息的窗口可以根据需要自由处理此事件。传递给window.postMessage() 的参数（比如 message ）将通过消息事件对象暴露给接收消息的窗口。

react数据传递给iframe

1. 在父组件中引入iframe

import React from 'react';

export default function Demo() {
  return (
    <>
      {/* <div>{REACT_APP_ENV}</div> */}
      {REACT_APP_ENV === 'dev' ? (
        <iframe
          src="http://10.0.0.208:8000/apidata/databases?name=23124"
          frameBorder="0"
          height="900px"
          width="100%"
          id="childFrame"
        />
      ) : (
        <div>正式环境</div>
      )}
    </>
  );
}

2.在父页面中添加button并且按钮注册事件

import React from 'react';

export default function Demo() {
  return (
    <>
      <button
        onClick={() => {
          // 必须是iframe加载完成后才可以向子域发送数据
          const childFrameObj = document.getElementById('calculation');
          childFrameObj.contentWindow.postMessage(1233, '*'); // window.postMessage
        }}
      >
        点击我向iframe传值
      </button>
      {REACT_APP_ENV === 'dev' ? (
        <iframe
          // src="http://10.0.0.208:8000/apidata/databases?name=23124"
          // src="http://192.168.3.81:8002/apidata/databases?name=23124"
          frameBorder="0"
          height="900px"
          width="100%"
          id="childFrame"
        />
      ) : (
        <div>正式环境</div>
      )}
    </>
  );
}

3.在iframe页面中添加事件处理函数,并且监听message事件

// 添加事件处理函数
function receiveMessageFromIndex ( event ) {
    console.log( '我是iframe,我接收到了：', event.data );
}
// 监听message事件
window.addEventListener("message", receiveMessageFromIndex, false);

iframe数据传输给react页面

1.在iframe页面添加惦记事件,使用postMessage传递数据

      <button
        onClick={() => {
          window.parent.postMessage('iframe传递的信息', '*');
        }}
      />

2.在父组件中通过生命中期componentDidMount方法接收iframe代码(也可使用useEffect函数接收)

import React, { useEffect } from 'react';

export default function BusinessGuarantee() {
  function receiveMessageFromIndex(params: any) {
    if (params) {
      console.log('react页收到的iframe信息:', params.data);
    }
  }
  useEffect(() => {
    // 监听message事件
    window.addEventListener('message', receiveMessageFromIndex, false);
  }, []);
  return <></>;
}