EnhancedPostMessage

An easy way to do 1 and 2 way communication across multiple frames/windows. Supports adding events programatically, and triggering events at any time after being instantiated.

Options

You can view all options in the README: README.md

One way communication

Code

This page 
EnhancedPostMessage({
    sources: {
        oneWaySource: document.getElementbyId('oneWayIframe')
    }
});
document.getElementById('oneWayButton').addEventListener('click', function(){
    EnhancedPostMessage.trigger('oneWayEvent', 'oneWaySource');
});
The iframe 
EnhancedPostMessage({
    listeners: {
        oneWayEvent: function(){
            clickCounter++;
            document.getElementById('clickCounter').innerHTML = clickCounter.toString();
        }
    }
});

Example

One way communication with data

Code

This page 
EnhancedPostMessage({
    sources: {
        oneWayWithDataSource: document.getElementbyId('oneWayWthDataIframe')
    }
});

var oneWayWithDataInput = document.getElementById('oneWayWithDataInput');
oneWayWithDataInput.addEventListener('keyup', function(){
    EnhancedPostMessage.trigger('oneWayWithDataEvent', 'oneWayWithDataSource', oneWayWithDataInput.value);
});
The iframe 
EnhancedPostMessage({
    listeners: {
        oneWayWithDataEvent: function(text){
            document.getElementById('typedText').innerHTML = text;
        }
    }
});

Example

Iframe

Parent

Two way communication

Code

This page 
EnhancedPostMessage({
    sources: {
        twoWaySource: document.getElementbyId('twoWayIframe')
    },
    listeners: {
        twoWayIframeEvent: function(){
            iframeClickCounter++;
            document.getElementById('iframeClickedCount').innerHTML = iframeClickCounter.toString();
        }
    }
});

document.getElementById('twoWayButton').addEventListener('click', function(){
    EnhancedPostMessage.trigger('twoWayEvent', 'twoWaySource');
});
The iframe 
EnhancedPostMessage({
    listeners: {
        twoWayEvent: function(){
            clickCounter++;
            document.getElementById('clickCounter').innerHTML = clickCounter.toString();
        }
    },
    events: {
        twoWayIframeEvent: true
    }
});

document.getElementById('twoWayIframeButton').addEventListener('click', function(){
    // Note the parent string as the source, but no sources are defined.
    // `parent` is a predefined source that will use `window.parent` as the source.
    EnhancedPostMessage.trigger('twoWayIframeEvent', 'parent');
});

Example





Two with parent button clicked 0 times.

Two way communication with data

Code

This page 
EnhancedPostMessage({
    sources: {
        twoWayWithDataSource: document.getElementbyId('twoWayWthDataIframe')
    },
    listeners: {
        twoWayWithDataIframeEvent: function(text){
            document.getElementById('parentTwoWayInput').innerHTML = text;
        }
    }
});

var parentTwoWayInput = document.getElementById('parentTwoWayInput');
parentTwoWayInput.addEventListener('keyup', function(){
    EnhancedPostMessage.trigger('twoWayWithDataEvent', 'twoWayWithDataSource', parentTwoWayInput.value);
});
The iframe 
EnhancedPostMessage({
    listeners: {
        twoWayWithDataEvent: function(text){
            document.getElementById('iframeTwoWayInput').value = text;
        }
    }
});

var iframeTwoWayInput = document.getElementById('iframeTwoWayInput');
iframeTwoWayInput.addEventListener('click', function(){
    // Note the parent string as the source, but no sources are defined.
    // `parent` is a predefined source that will use `window.parent` as the source.
    EnhancedPostMessage.trigger('twoWayIframeEvent', 'parent', iframeTwoWayInput.value);
});

Example

Iframe

Parent

Adding Sources, Events and Listeners Dynamically

Code

This page 
EnhancedPostMessage.addSource('dynamicSourceName', document.getElementById('dynamicSource'));

var iframe = document.createElement('iframe');
iframe.onload = function(){
    EnhancedPostMessage.trigger('dynamicEventName', 'dynamicSourceName');
};
document.getElementsByTagName('body')[0].appendChild(iframe);
The Iframe 
var callback = function(){
    // Do something amazing
};
EnhancedPostMessage.addListener('dynamicEventName', callback);

Example

Iframe

Parent

Multiple Sources

The plugin works with multiple sources, listeners and events. This page, works off of one instance of the plugin for all examples.
For full usage, view source this page for all the JS. 
EnhancedPostMessage({
    sources: {
        oneWay: document.getElementById('oneWayIframe'),
        oneWayWithData: document.getElementById('oneWayWithDataIframe'),
        twoWay: document.getElementById('twoWayIframe'),
        twoWayWithData: document.getElementById('twoWayWithDataIframe')
    },
    listeners: {
        twoWay: updateIframeClickedCount,
        twoWayWithData: updateTwoWayWithDataInputValue
    },
    stringify: true,
    debug: true
});