fe_service_ebtp_frontend/src/pages/userformal/faceLogin/FrameFaceLogin.tsx

import React from "react";
import FrameLoader from "./FrameLoader";
export default class FrameFaceLogin extends React.Component {
  constructor(props:any) {
    super(props);
    console.log(props, "props数据");
    this.state = {
      transferData: {
        image: ''
      },
    };
  }
  componentDidMount() {
  // 接收Iframe传递的数据
    window.addEventListener("message", (e) => {
      const { image} = e.data || {}; //传递的数据
      if (image) {
        this.setState({
          transferData: {
            image:e.data
          },	
        });
        const url = 'http://127.0.0.1:8081/outer/v1.0/stock/logicStock/rgbArray2Base64';
        window.fetch(url,{
          method:'post',
          body : JSON.stringify({//post请求参数
            type: 'pixel', 
            rgb: image
          })
        }).then(res => res.json()).then(res => {
          const childFrameObj = document.getElementById('faceLoginFrame');
          childFrameObj.contentWindow.postMessage(res, '*');
        }) 
      }
    });
  }
 
  render() {
    const { transferData } = this.state || {};
    console.log(transferData, "数据");
    return (
      <div style={{ height: "100%" }}>
		{/* 设置Iframe 盒子的宽度 */}
        <div style={{ minHeight: "calc(55vh - 97px)", position: "relative" }}>
        {/* 这个是打包后的Iframe 地址：要到webpack中配置打包地址 */}
          <FrameLoader url="/faceLoginIE/index.html" />
        </div>
      </div>
    );
  }
}