从iframe中的纯JavaScript调用Ember操作

Question

我在ember app中嵌入了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);
    }
  }
}

此代码将调用应用程序路由的操作.在他们内部,你将操纵你的应用程序.我创建了一个演示这种方法的旋转器.

(抱歉格式不正确,代码不是很干净,有点晚了)