在VUE

Question

我想将数据从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>

我的档案.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>

这是构建iframe的js

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

现在返回

Answer 1

遇到同样的问题。我在远程URL上有一个iframe，但是当我尝试使用本地运行的postMessage时，它会执行此操作。

当我运行构建并将应用程序推送到S3时，postMessage将起作用。尝试从构建的./dist文件夹中运行同一件事，看看是否发生同样的事情。

Answer 2

您的数据是不确定的，这是事实。

因此您什么都没有收到，因为您的html是在vue结构之前创建的。

换句话说，这首先执行：

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

然后：

 var msg = { text: 'Hola mundo'}
      iframe.contentWindow.postMessage(msg,'*')

因此，在发送数据的那一刻，没有人能够接收数据，而当receiveMessage函数正在工作时，没有人在发送数据。

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

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

希望它还是有帮助的。