最近在处理这样一个项目，react使用iframe嵌套了一个angular项目，现在想让两者进行通信实现一个上传的功能。

看到这个需求是不是有点一脸茫然，硬着头皮上吧。我会按照我的业务流程叙述我是如何实现的。

• 父页面 是react 写的
• 子页面 是angular写的
• 接下来的叙述均为父子页面

1：子页面调用父页面方法

子页面方法：

 window.parent.postMessage(传递参数, "*");

父页面方法：

window.addEventListener(
      'message',
      function(e) {
       console.log(e.data)
      },
      false,
    );

传递的数据会在e.data中，如果你的项目中需要多个地方用到这个方法建议在传递的参数中增加识别变量，用来区分具体是干什么的。

在react中把这个方法放在componentDidMount即可

2：子页面给父页面传递文件对象

在实际的开发过程中发现，通过这种方法是无法直接传递文件对象的，具体报错就不再展示了。
再加上文件对象不能通过JSON.stringify转换成字符串，所以只能转换成base64 格式
转换方法如下：

var reader = new FileReader(); //实例化文件读取对象
        reader.readAsDataURL(fileItem._file); //将文件读取为 DataURL,也就是base64编码
        let dataURL = null;
        reader.onload = function (ev) {
          //文件读取成功完成时触发
          dataURL = ev.target.result; //获得文件读取成功后的DataURL,也就是base64编码
          // console.log(dataURL);
          window.parent.postMessage({ base: dataURL, comer: "上传文件" }, "*");
        };

3:父页面接收参数并转码

如果你只需要使用base64即可完成业务那这一步是没有必要的
这个方法会先把base64转换成BolB格式，在转换成file格式

componentDidMount() {
    // 得到B传来的值
    const _this = this;
    window.addEventListener(
      'message',
      function(e) {
        if (e.data.comer === '上传文件') {
          _this.changeBaseToFile(e.data.base);
        }
      },
      false,
    );
  }
  
// 把base64转换成文件
  changeBaseToFile = base64String => {
    console.log(base64String)
    const base64ToBlob = function(base64Data) {
      let arr = base64Data.split(','),
        fileType = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        l = bstr.length,
        u8Arr = new Uint8Array(l);

      while (l--) {
        u8Arr[l] = bstr.charCodeAt(l);
      }
      return new Blob([u8Arr], {
        type: fileType,
      });
    };
    // blob转file
    const blobToFile = function(newBlob, fileName) {
      newBlob.lastModifiedDate = new Date();
      newBlob.name = fileName;
      return newBlob;
    };

    const blob = base64ToBlob(base64String);
    const file = blobToFile(blob, '图片');
  };

4:通知子页面上传状态，和相关数据

上传的具体实现因为每个项目的需求不一样所以我就不再赘述，我们用的是自己封装的组件而且还是在私库。

获取到上传请求后返回的数据需要告知子页面，子页面还需展示。

父页面：

// 调用angular的方法
  onAngularFun =(fileList) =>{
    document.getElementById('iframe的ID').contentWindow.postMessage({fileData: fileList, comer:'上传文件'},"*");
  }

子页面：

$scope.getReactImage = () => {
      window.addEventListener(
        "message",
        function (e) {
          if (e.data.comer === "上传文件") {
            $scope.changeProdPictures(e.data.fileData)
          }
        },
        false
      );
    };
    $scope.getReactImage();

其中$scope.changeProdPictures(e.data.fileData)就是拿到数据后的处理逻辑了，不再赘述。

以上方法似乎在跨域的情况下也能使用，多说一句，angular这边拿到数据后更新自己的图片数组但是渲染并未刷新，在方法的最后加上$scope.$apply();即可，也只是可能， 我的这样写是可以的，你们的不一定。对angular不懂，所以只能受之与鱼了。