JSFiddle - React, Tailwind, and code Playground

by Kerrick

HTML

<script src="http://mozilla.github.io/jschannel/src/jschannel.js"></script>
<iframe id="secureFrame" src="https://kerricklong.com/tmp/postmessage.html"></iframe>
<ul id="log"></ul>

CSS

#secureFrame { display: none; }

JavaScript

var log = function() {
    console.log(arguments);
    var $log = $('#log');
    for (var i = 0; i < arguments.length; i += 1) {
        $log.append($('<li></li>').text(arguments[i]));
    }
    $log.append('<hr>');
}

var secureChannel = Channel.build({
    window: document.getElementById('secureFrame').contentWindow,
    origin: 'https://kerricklong.com',
    scope: 'someRandomNamespaceForThisChannel',
    onReady: function() {
        log('Channel is ready.');
    }
});

secureChannel.call({
    method: 'string',
    success: function(data) { log(data) }
});

secureChannel.call({
    method: 'number',
    success: function(data) { log(data) }
});

secureChannel.call({
    method: 'boolean',
    success: function(data) { log(data) }
});

secureChannel.call({
    method: 'object',
    success: function(data) { log(data) }
});

secureChannel.call({
    method: 'error',
    success: function(data) { log('whoops') },
    error: function(type, contents) { log(type, contents) }
});

secureChannel.call({
    method: 'async',
    success: function(data) { log(data) },
});

secureChannel.call({
    method: 'asyncError',
    success: function(data) { log('whoops') },
    error: function(type, contents) { log(type, contents) }
});