javascript - 从 iframe 中的纯 JavaScript 调用 Ember 操作

Question

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

我想我需要以某种方式通过 window.parent 获取 ember 实例，但如何去做，尤其是如何触发 ember 操作？

Answer 1

你将面临两个问题。

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

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

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

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

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

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);
    }
  }
}

此代码将调用应用程序 路由的操作。在它们内部，您将操纵您的应用程序。我创建了一个 twiddle这证明了这种方法。

(抱歉格式不佳且代码不是很干净，只是有点晚了)