clevva-postmess

A simple postMessage based javascript library used to send and receive messages between cross domain window objects

npm i clevva-postmess

// Parent.html

import PostMess from 'clevva-postmess'

const pm = PostMess({

    // The css selector of the iframe or the iframe element itself
    // eg: This is equivalent to the below selector '#iframe'
    // selector: document.querySelector('#iframe'),
    selector: '#iframe',

    // The channel must match on the child, otherwise they cannot communicate
    channel: 'pm',

    // An array of origins to communicate with, this would typically match the url in the iframe.
    // eg: <iframe src="http://localhost/child.html"></iframe>
    //                  ^^^^^^^^^^^^^^^^
    origins: ['http://localhost'],

    // This will "console.log()" info for debugging (NB: set to false in production)
    debug: true
});

pm.send('ping', {timestamp: +new Date()}, (resp) => {
    console.log('response:', resp);
});

// Child.html

import PostMess from 'clevva-postmess'

const pm = PostMess({
    channel: 'pm',
    origins: ['http://localhost'],
    debug: true
});

pm.receive('hi', (payload, respond) => {
    respond('hey ' + payload.fullname)
});