Post 来自 React 中 iframe 的消息

Question

我无法在 React 中从 跨域 iframe 发送消息 。我读了很多文章，其中大部分是关于发送消息到 iframe。

问题是它没有在嵌入 iframe 的页面中显示任何错误消息，当我去查看我嵌入的页面时，它确实显示了错误消息。

Scene.js:230 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://thewebsite.com') does not match the recipient window's origin ('https://mywebsite').

所以我不知道我的消息是否已发送成功。

这是我的代码：

confirm = () => {
    const { homeId, correctData } = this.state
    const form = new FormData();

    //process data
    form.append('scene_id', homeId)
    form.append('material_id', correctData[0].id)
    form.append('material_img', correctData[0].component_img)

    const obj = JSON.parse(JSON.stringify(form));
    //
    //way 1
    parent.postMessage(obj, '*')

    //way 2
    parent.postMessage(obj, 'https://www.thewebsite.com/pro_wall.html')

    //way 3
    window.frames.postMessage(obj, '*')

    //way 4
    window.top.postMessage(obj, '*')

    //way 5
    const targetWindow = window.open('https://www.thewebsite.com/pro_wall.html')

    setTimeout(() => {
      targetWindow?.postMessage(obj, '*')
    }, 3000)  
  }

很抱歉给 post 消息写了太多方法，只是想确保我尝试了每一种可能性。

Answer 1

经过几次尝试，我从客户那里得到了积极的反馈，说他们获得了数据。这是我最终写的代码。

confirm = () => {
  const { homeId, correctData } = this.state
  const formData = new FormData();

  formData.append('scene_id', homeId)
  formData.append('material_id', correctData[0]?.id)
  formData.append('material_img', correctData[0]?.component_img)

  var object = {};
  formData.forEach((value, key) => {object[key] = value});
  var json = JSON.stringify(object);

  parent.postMessage(json, `https://www.thewebsite.com/pro_wall.html`)
} 

我从 web devTool 看到了客户端的代码，它看起来像这样，

<scritp>
  window.addEventListener("message", receivewall, false);
  function receivewall(event){
      var origin = event.origin;
      if(origin == 'https://mywebsite'){
          var params = JSON.parse(event.data);
          $('#result').html($.param(params));
          // console.log(params);
      }
      // $('#result').html(data);
  }
  function getQueryVariable(query) {
      var vars = query.split('&');
      var params = {};
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split('=');
        params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
      }
      return params;
  }
</scritp>