Question

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

我想我不知何故需要通过window.parent来获取ember实例，但是该怎么做，特别是如何触发一个ember动作？

Answer 1

你将面临两个问题。

首先，直到框架的内容从与app相同的域加载，它才完全隔离。但是有一种方法可以与这样的框架window.postMessage

进行通信

因此，在iframe中，应执行此类代码：

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

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

第二个问题是调用余烬动作。我建议在应用程序路由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);
    }
  }
}

此代码将调用应用程序路由的操作。在他们内部，你将操纵你的应用程序。我创建了一个twiddle来演示这种方法。

（抱歉格式不正确且代码不是很干净，但是有点晚了）

从iframe中的纯JavaScript调用Ember操作

1 个答案: