从iframe中的纯JavaScript调用Ember动作

Invoke Ember action from plain JavaScript in iframe

本文关键字：调用 Ember 动作 JavaScript iframe      更新时间：2023-09-26

我在ember应用程序中嵌入了一个iframe。我如何从iframe中调用组件的方法?

我想我不知何故需要通过窗口获得ember实例。父母，但如何做到这一点，特别是如何触发烬行动?

你将面临两个问题。

首先，在frame的内容是从与app相同的域中加载之前，它是完全隔离的。但是有一种方法可以与这样的框架进行通信，window.postMessage

因此，在iframe内，应该执行这样的代码:

window.parent.postMessage({action: 'sayHi'}, '*');

第一个参数是要发送到父窗口的数据(我只是把动作字段放在那里，但你可以添加其他信息，你需要传递)

第二个问题是调用ember动作。我建议在应用程序路由的beforeModel钩子中定义消息侦听器。当用户加载应用程序时，这个钩子将被执行一次。这使它成为一个正确的位置。

beforeModel() {
  window.addEventListener("message", receiveMessage, false);
  var that = this;
  function receiveMessage(event) {
    var origin = event.origin || event.originalEvent.origin; // For Chrome, the origin property is in the event.originalEvent object.
    // Here you want to check origin, but in twiddle its null, try on ur machine...
    var data = event.data;
    if (data.action !== undefined) {
      that.send(data.action);
    }
  }
}
这段代码将调用application路由的操作。在它们里面，你可以操作你的应用程序。我创建了一个twiddle来演示这种方法。

(抱歉格式不佳，代码不太干净，只是有点晚)
相关文章：