Vue中addEventListener监听message返回event.data undefined及HTML向Vue iframe传数问题

嘿，我来帮你搞定这个问题！首先咱们拆解一下：你遇到的event.data为undefined的情况，大概率是消息发送或监听的环节出了问题，同时咱们还要把父HTML向Vue iframe传数据的流程走通。

先排查event.data为undefined的常见原因 #

• 消息发送方没传有效数据：如果父页面调用postMessage时没传数据，或者传了不可序列化的内容（比如函数），Vue这边自然拿不到有效数据
• iframe还没加载完成就发消息：如果消息发送时Vue所在的iframe还没初始化好，监听事件还没注册，消息直接丢失，后续你再监听也拿不到
• Origin验证逻辑有误：如果你的监听函数里加了origin判断，但判断条件写错了（比如域名拼写错误），可能会直接跳过数据处理，看起来像是event.data为undefined

正确实现父HTML向Vue iframe传数据的步骤 #

第一步：修改父页面（checkout.html）的发送逻辑 #

看你提供的代码，opencheckout函数里要处理iframe的创建和消息发送，这里要确保拿到iframe元素，并且等它加载完成后再发消息：

<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()
  // 假设CulqiJS生成的iframe会被插入到checkoutContainer里，这里获取它
  const vueIframe = document.querySelector('#checkoutContainer iframe');
  
  // 等iframe加载完成再发送消息，避免消息丢失
  vueIframe.addEventListener('load', function() {
    // 这里换成你实际要传递的业务数据，比如订单信息
    const sendData = {
      action: 'init-checkout',
      orderInfo: { amount: 2000, currency: 'USD' }
    };
    // 第二个参数填Vue项目的实际域名，别用*，提升安全性
    vueIframe.contentWindow.postMessage(sendData, 'https://your-vue-app-url.com');
  });

  document.getElementById('checkoutContainer').innerHTML = CulqiJS....
}
</script>

第二步：在Vue项目里正确监听'message'事件 #

在Vue组件的生命周期里注册监听，记得验证消息来源，避免恶意请求：

<template>
  <!-- 你的组件内容 -->
</template>

<script>
export default {
  mounted() {
    // 注册message事件监听
    window.addEventListener('message', this.handleIframeMessage);
  },
  beforeUnmount() {
    // 组件销毁前移除监听，防止内存泄漏
    window.removeEventListener('message', this.handleIframeMessage);
  },
  methods: {
    handleIframeMessage(event) {
      // 验证消息来源，换成父页面的实际域名
      const trustedOrigin = 'https://your-parent-html-domain.com';
      if (event.origin !== trustedOrigin) {
        console.warn('收到未知来源的消息，已忽略');
        return;
      }

      // 现在可以正常获取event.data了
      if (event.data) {
        console.log('收到父页面的数据:', event.data);
        // 这里写你的业务逻辑，比如根据传过来的信息初始化支付
        this.initCheckout(event.data.orderInfo);
      } else {
        console.error('消息数据为空，请检查父页面的发送逻辑');
      }
    },
    initCheckout(orderInfo) {
      // 你的支付初始化逻辑
    }
  }
}
</script>

几个关键注意事项 #

• 务必验证Origin：不管是发送还是接收消息，都要指定具体的域名，别用*，防止跨站脚本攻击
• 确保数据可序列化：postMessage只能传递可序列化的数据（对象、字符串、数字等），不能传函数、DOM元素这类无法序列化的内容
• 清理监听事件：Vue组件销毁时一定要移除message监听，不然会导致内存泄漏

内容的提问来源于stack exchange，提问作者Harol Rodriguez