Posting a message to the sandbox

In this task we'll set up the communication between our popup and the sandboxed template page to see how we can get the template to render when the popup is opened.

Engage Thrusters

First of all we can add the code that sends the message to the sandboxed page requesting the template to render. In popup.js, add the following code:

var iframe = $("#poster"),
    message = {
        command: "issueTemplate",
        context: JSON.parse(localStorage.getItem("webContacts"))
    };
    iframe.on("load", function () {
        if (message.context) {
            iframe[0].contentWindow.postMessage(message, "*");
        } else {
            $("<li>", {
                text: "No contacts added yet"
            }).appendTo($("#contacts"));
        }
    });

window.addEventListener("message", function (e) {
    $("#contacts").append((e.data.markup));
});

Next we need to add the code that will respond to the initial message. Add the following code to template.js directly...