javascript - 在 iframe 中将参数传递给 ember

Question

从另一个应用程序向 ember.js 传递参数的最佳实践是什么。例如，我需要单击主页中的链接并将参数传递给 iframe 中的 ember。我通过 cookie 完成此操作，并在循环中检查值，但这不是一个好的做法。

 setInterval(function(){
      Ember.$.getJSON('/url'+Ember.$.cookie("id")).then(function(response){...});
        }, 500);

Answer 1

我会使用window.postMessage()和 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(例如，可以绑定(bind)到文本字段)。您的 iframe 将具有 id“inner_page”。 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
            }
        }
    });

一些注意事项:

• 我们的消息有一个固定的“类型”属性。目前，这始终是“操作”，但如果您想要多种通信协议(protocol)，它可能会很有用。

• 您将需要某种方法来获取要发送消息的事件 Controller 或路由。在此示例中，每次设置新 Controller (App.activeController) 时，我都会缓存事件 Controller 。如果您采用此模型，则可能应该将其实现为 Route Mixin。不确定这在较大的应用程序中效果如何，但对于本示例来说已经足够了。