Javascript 在iframe中将参数传递给ember
将参数从另一个应用程序传递到ember.js的最佳实践是什么。 例如,我需要单击主页中的链接,并在iframe中将参数传递给ember。 我是通过cookies完成的,并在循环中检查值,但这不是一个好的做法Javascript 在iframe中将参数传递给ember,javascript,iframe,ember.js,iframe-app,Javascript,Iframe,Ember.js,Iframe App,将参数从另一个应用程序传递到ember.js的最佳实践是什么。 例如,我需要单击主页中的链接,并在iframe中将参数传递给ember。 我是通过cookies完成的,并在循环中检查值,但这不是一个好的做法 setInterval(function(){ Ember.$.getJSON('/url'+Ember.$.cookie("id")).then(function(response){...}); }, 500); 我将使用和window.on(“messa
setInterval(function(){
Ember.$.getJSON('/url'+Ember.$.cookie("id")).then(function(response){...});
}, 500);
我将使用和window.on(“message”)系统连接这两个应用程序
例如,假设在iFrame中有一个ember应用程序可以显示集合中的小部件,在主应用程序中有一个id选择器。这是如何工作的
在主应用程序中:
App.IndexController = Ember.Controller.extend({
//... other stuff
actions: {
showWidget: function () {
var id = parseInt(this.get("widgetId"), 10),
iframe = $("#inner_page")[0];
iframe.contentWindow.postMessage(
JSON.stringify({ type: "action", args: ["showWidget", id]}),
"*");
}
}
});
widgetId
是要传递给iframe的id(例如,可以绑定到文本字段)。您的iframe将具有id“内部页面”。postMessage
调用中的第二个参数是origin,一旦通信正常运行,您就应该研究如何保护它
iframe应用程序的代码更有趣:
$(window).on("message", function(e) {
var message = JSON.parse(e.originalEvent.data),
handler = App.messageHandlers[message.type];
if (!handler) {
consolw.log("WARNING! Invalid action call!");
return;
}
handler(message);
});
App.messageHandlers = {
action: function (msg) {
if (App.activeController) {
App.activeController.send.apply(App.activeController, msg.args);
}
}
};
App.IndexRoute = Ember.Route.extend({
//...
setupController: function (controller, model) {
this._super(controller, model);
App.activeController = controller;
}
});
App.IndexController = Ember.Controller.extend({
//...
actions: {
showWidget: function (id) {
// update active widget, load route or whatever
}
}
});
请注意:
- 我们的消息具有固定的“type”属性。现在,这始终是“操作”,但如果您需要多个通信协议,它可能会很有用
- 您将需要某种方式来获取要向其发送消息的活动控制器或路由。在本例中,每次设置新控制器时,我都会缓存活动控制器(
)。如果您使用此模型,则可能应该将其实现为路由混合。不确定这在更大的应用程序中工作得如何,但对于本例来说已经足够了App.activeController