Question

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

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

我想使用stenciljs的@Listener

我使用旧式window.addEventListener('message', myMessageHandlingDelegate)，在iframe的另一页上有一个工作模式。

但是，我真的很想使用@Listener属性/修饰符来处理已发布消息的结果。我尝试了@Listener('message')，但未添加代码。...

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

Answer 1

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

Answer 2

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

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

window.parent.postMessage发送给@Listener

2 个答案: