JSFiddle - React, Tailwind, and code Playground

by Jan Marthedal Rasmussen

HTML

<p>
    <input id="text" type="text" placeholder="Type some text" />
    <button id="btn1">Set text</button>
</p>

<p>
    <input id="number" type="number" />
    <button id="btn2">Set number</button>
</p>

<iframe id="sub" src="https://dessci.github.io/UniMath/userconfig.html" style="display: none;"></iframe>

JavaScript

var f = document.querySelector('#sub'),
    $text = $('#text'),
    $btn1 = $('#btn1'),
    $number = $('#number'),
    $btn2 = $('#btn2');

function postMessage(data) {
    f.contentWindow.postMessage(JSON.stringify(data), 'https://dessci.github.io');
}

$(window).on('message', function (ev) {
    var data = JSON.parse(ev.originalEvent.data);
    if (data.command === 'value') {
        if (data.key === 'myText' && typeof data.value === 'string') {
            $text.val(data.value);
        } else if (data.key === 'myNumber' && !isNaN(parseFloat(data.value))) {
            $number.val(parseFloat(data.value));
        }
    }
});

$btn1.on('click', function () {
    postMessage({ command: 'set', key: 'myText', value: $text.val() });
});

$btn2.on('click', function () {
    postMessage({ command: 'set', key: 'myNumber', value: $number.val() });
});

postMessage({ command: 'get', key: 'myText' });
postMessage({ command: 'get', key: 'myNumber' });