Javascript 增补列表器'；消息'；返回VUE中未定义的event.data

我想将数据从html发送到iframe，iframe包含vue中的页面

checkout.html

<script type="text/javascript" src="/api/js"></script>
<div class="container">
    <button id="pay-button" onclick="opencheckout()" class="btn disabled">Checkout</button>
    <div id="checkoutContainer"></div>
</div>    
<script>
    function opencheckout() {
        var checkout_i = CulqiJS.openCheckout()
        document.getElementById('checkoutContainer').innerHTML = CulqiJS.openCheckout()

        if (checkout_i) {
          var iframe = document.getElementById('checkout_form')
          var msg = { text: 'Hola mundo'}
          iframe.contentWindow.postMessage(msg,'*')
        }
    }
</script>

结账
函数opencheckout（）{
var checkout_i=CulqiJS.openCheckout（）
document.getElementById（'checkoutContainer'）。innerHTML=CulqiJS.openCheckout（）
如果（i）{
var iframe=document.getElementById（'checkout\u form'）
var msg={text:'Hola mundo'}
iframe.contentWindow.postMessage（消息“*”）
}
}

我的文件.vue checkout.vue

<template>
  <div class="container" ref="maincheckout">
    <p>test</p>
  </div>
</template>
<script>
  export default {  
    created () {
      window.addEventListener('message',receiveMessage, false);
      function receiveMessage (event) {
        console.log('event data: ', event)
      }
    }
  }
</script>

试验

导出默认值{
创建（）{
window.addEventListener（'message'，receiveMessage，false）；
函数接收消息（事件）{
console.log（'事件数据：'，事件）
}
}
}

这就是构建iframe的js

var CulqiJS = {
  openCheckout: function (options) {
    return '<iframe id="checkout_form" width="100%" height="340" src="/#/checkout" frameborder="0" allowfullscreen></iframe>'
  }
}

var CulqiJS={
openCheckout:函数（选项）{
返回“”
}
}

现在把那个还给我

---

遇到了同样的问题。我在远程url上有一个iframe，但当我尝试使用本地运行的postMessage时，它会这样做

---

当我运行构建并将应用程序推送到S3时，postMessage就起作用了。尝试从生成的./dist文件夹运行相同的操作，看看是否发生相同的操作。

您的数据未定义，这是事实

因此，您没有收到任何内容，因为您的html是在vue结构之前创建的

换句话说，这是首先执行的：

 function receiveMessage (event) {
    console.log('event data: ', event)
  }

然后：

因此，当您发送数据时，没有人能够接收数据，当您的receiveMessage功能工作时，没有人发送数据

您可以通过以下方式在创建vue结构后强制执行html语句：

 setTimeout(function(){ iframe.contentWindow.postMessage(msg,'*'); }, 3000);  

希望它仍然有用

 setTimeout(function(){ iframe.contentWindow.postMessage(msg,'*'); }, 3000);