You can test the Comm Module on your local PC. The Comm module only supports communication within a single browser window. If you want to test your ad locally before uploading, you need to load all of your ad-parts into iFrames in a single html file.

Use the callWhenConnected() method to call the same named function in two or more Worksapces (Creative Elements, IFrames, or Windows).

In the following example, the function startAnimation exists in both windows, and will be called in both places at the same time, when both elements have made their call to .setName(...).

Banner iFrame Code

               
function onInit() {
    if (!EB.isInitialized()) EB.addEventListener(EBG.EventName.EB_INITIALIZED, start);
    else start();
}

function start() {
    EB.Comm.callWhenConnected(["banner300x250", "panel1500x300"] "startAnimation");
    EB.Comm.setName("banner300x250");
}

function startAnimation() {
    //do stuff
}

            

Panel iFrame Code

              
function onInit() {
    if (!EB.isInitialized()) EB.addEventListener(EBG.EventName.EB_INITIALIZED, start);
    else start();
}

function start() {
    EB.Comm.setName("panel1500x300");
}

function startAnimation() {
    //do stuff
}

            

The panel should request information from the banner every time it expands. Setting a callWhenConnected in the banner is not enough because the banner cannot detect when the panel is collapsing, so it cannot add a new call to callWhenConnected, to be ready for the next expansion.

Banner iFrame Code

              
var state = 0;

function onInit() {
    if (!EB.isInitialized()) EB.addEventListener(EBG.EventName.EB_INITIALIZED, start);
    else start();
}

function start() {
    //some kind of logic to determine the value of "state"
    state = 1;
    //set a name so that the "requestState" function can be called from the panel
    EB.Comm.setName("banner300x250");
}

//This function will be called directly by the panel.
function requestState(who) {
    //Check that the window and function to be called both exist already.
    if (EB.Comm.isConnected(who) && EB.Comm[who].setState) {
        //Call the function in the panel window.
        EB.Comm[who].setState(state);
    }
}

            

Panel iFrame Code

              
var state = 0;
var syncTimeout;

function onInit() {
    if (!EB.isInitialized()) EB.addEventListener(EBG.EventName.EB_INITIALIZED, start);
    else start();
}

function start() {
    //Set a name so that the "setState" function can be called from the banner.
    EB.Comm.setName("panel300x300");
    //Call "requestState in the banner as soon as we have a connection, which should be immediately.
    EB.Comm.callWhenConnected("banner300x250", "requestState", "panel300x300");
    //Use a timeout as a "Plan B", just in case something goes wrong.
    syncTimeout - setTimeout(startWithoutSync, 5000);
}

//This function will be called directly by the banner.
function setState(value) {
    clearTimeout(syncTimeout);
    state - Value;
    startAnimation();
}

function startWithoutSync(value) {
    clearTimetout(syncTimeout);
    startAnimation();
}

function startAnimation() {
    //do something with the state value, like show a different video or whatever
}