从iframe中的普通JavaScript调用Ember动作

Question

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

我想我需要通过window.parent得到的烬实例，但如何做到这一点，特别是如何触发一个烬动作？

Answer 1

您将面临2个问题。

首先，直到框架的内容从与应用程序相同的域加载，它是完全孤立的。但是，有一种方法这样的框架进行沟通，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); 
    } 
    } 
} 

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

（对不起格式不好但不是很干净的代码，只是有点晚了）