window.parent.postMessage 给@Listener

Question

我们有一个要求，我们加载一个单独的页面作为模式（是的，对吧？）

嵌入页面使用 window.parent.postMessage(messageString, '*') 表示操作已完成。

我想用stenciljs的@Listener

我有一个带有 iframe 的工作模式到另一个页面，使用旧学校 window.addEventListener('message', myMessageHandlingDelegate)。

不过，我真的很想用@Listener attribute/decorator 来处理发布消息的结果。我尝试了 @Listener('message') 但没有添加代码....

有没有办法让 stenciljs 侦听器捕获从子 iframe 发布的消息？

Answer 1

@Listen 装饰器用于将侦听器添加到 JavaScript 自定义事件 (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) 或由 Stencil 子组件发出的事件。这意味着您不能将 Message API（使用 window.postMessage 或监听消息事件）与该装饰器一起使用。您仍然可以像您在问题中指出的那样使用 addEventListener 消息事件。

Answer 2

我在 stenciljs 自定义组件中使用了以下代码来实现此功能：

@Listen('message', { target: 'window' })
handleMessage(ec) {
  console.log("Event from iFrame triggered");
}

window.parent.postMessage 给@Listener

window.parent.postMessage to @Listener

stenciljs