在iframe中将参数传递给余烬

Question

What is the best practice to passing parameter to ember.js from another application. For example, I need click on link in main page and pass parameter to ember in iframe. I done it through cookies, and check value in loop, but it's a not good practice.

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

Answer 1

I would use window.postMessage() and window.on("message") system to connect the two applications.

For example, let's say in your iFrame you have an ember app that can display a widget from collection and in your main app, you have an id selector. Here's how this would work.

In your main app:

    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 is the id you want to pass to iframe (can be tied to a text field, for example). Your iframe would have id "inner_page". The second argument in the postMessage call is origin, you should look into securing that once you get the communication working.

Code for the iframe app is more interesting:

    $(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
            }
        }
    });

A few notes:

• Our message has a fixed "type" property. Right now, this is always "action", but it could be useful if you wanted multiple protocols of communication.

• You will need some way to get the active controller or route to which to send the message. In this example, I'm caching the active controller every time a new controller set up ( App.activeController ). If you went with this model, this should probably be implemented as a Route Mixin. Not sure how well this will work in a larger application, but it's sufficient for this example.