Simple-post-message NPM

simple-post-message

window.postMessage wrapper

uses addEventListener (IE9+)

Installation

$ npm install --save simple-post-message

Usage example (2-way communication on same domain)

Parent

var iframe = document.createElement('iframe');
iframe.src = 'http://example.com/pathname/to/site/';
document.body.appendChild(iframe);

var a = new SimplePostMessage(iframe.contentWindow,
  window.location.origin,
  function(data, srcWin) {
    console.log.bind(data, srcWin);
  });

a.send('Cześć!');

Iframe

var b = new SimplePostMessage(window.parent,
  location.origin,
  function(data, srcWin) {
    console.log(data, srcWin);
    b.send('Hejasek!');
  });

Log

Cześć, window object ref. (parent)
Hejasek, window object ref. (iframe)

Usage example (2-way communication on fifferent domains)

Parent (at http://example.com)

var a = new SimplePostMessage(iframeRef.contentWindow,
  'http://microsoft.com',
  function(data, srcWin) {
    console.log.bind(data, srcWin);
  });

a.send('Cześć!');

Iframe (at http://microsoft.com)

var b = new SimplePostMessage(window.parent,
  'http://example.com',
  function(data, srcWin) {
    console.log(data, srcWin);
    b.send('Hejasek!');
  });

Log

Cześć, window object ref. (parent)
Hejasek, window object ref. (iframe)

Arguments

target (required) - window.parent or iframe.contentWindow
targetOrigin (required) - target origin for security reasons (for http://example.com/pathname/to/site/ it's http://example.com)
receiveCallBack (optional) - commuinication with target

receiveCallBack arguments

message - message from target
srcWin - reference to target window

Methods

send - send message data and transfer - MDN
removeListener - removeEventListener for message in window, no arguments

ES5, ES6, UMD (CommonJS, AMD, global)

ES5 simple-post-message or cmnjs.uniqueid/es5/simplePostMessage
ES6 simple-post-message/es6/simplePostMessage
UMD simple-post-message/es5-umd/simplePostMessage (global: window.SimplePostMessage)