小编Ale*_*der的帖子

如何在 Angular 6+ 中正确地将事件监听器附加到全局“窗口”?

背景

我们的Angular 6应用程序包含iframe一些第三方数据。为了实现安全的跨域通信,子 iframe 使用window.postMessage() API 将消息发布到父 Angular 应用程序。为了接收这些消息,父窗口必须附加一个事件监听器,例如window.addEventListener("message", callback)监听MessageEvents

问题

我需要监听 Angular 组件内的消息事件,但如何以windowAngular 方式正确访问全局对我来说并不明显。目前我想到的唯一解决方案是:

  1. MessageListenerService创建一个使用以下方法调用的 Angular 服务:

function listenForMessageEvent(callback) { this.renderer.listen('window', 'message', callback); }

注意: this.renderer这里是Angular 核心的Renderer2 。

  1. MessageListenerService.listenForMessageEvent()只需在我的自定义组件中使用即可。

我觉得这不是 Angular 世界的标准方法。有人可以在这里建议任何最佳实践吗?

多谢。

javascript iframe dom postmessage angular

6
推荐指数
1
解决办法
2万
查看次数

标签 统计

angular ×1

dom ×1

iframe ×1

javascript ×1

postmessage ×1