在 iframe 内的 vue 应用程序中向父级发布消息

Question

我使用 Vite 编写了一个 vue 单页面应用程序（SPA），它应该可以集成在 iframe 中。应该有一个 API 用于网站和嵌入在 iframe 中的应用程序之间的通信。

我使用 postmessage API 来实现这一点。向应用程序发送消息工作正常。

但是，当我在应用程序中并尝试向父应用程序发送消息时，我使用 window.parent.postMessage(msg)。不幸的是 window.parent/window.top/window 指向同一位置。如何在应用程序外部发送消息

我尝试了以下方法。但是由于 window.parent 指向 window，因此不会收到任何消息。

vue 应用程序中的代码：

if (window.self !== window.parent) {
  window.parent.postMessage({
    type: "config",
    data: String(outputObj.text),
  });
}

父级中的代码：

window.contentWindow.addEventListener('message', function(event) {
  console.log("Message received from the child: " + event.data); // Message received from child
});  
}