JSFiddle - React, Tailwind, and code Playground

by ovfiddle

HTML

<a id="btn" href="#">Request a serialized function from the parent</a>

JavaScript

document.domain = "fiddle.jshell.net"; //sync the domains
//set up the listener
window.addEventListener("message", receiveMessage, false);

function receiveMessage(e) {
    console.warn(e.data);
    if (e.origin !== "http://fiddle.jshell.net") {
/* https://developer.mozilla.org/en/DOM/window.postMessage
Always provide a specific targetOrigin, not *, if you know where the other window's document should be located. Failing to provide a specific target discloses the data you send to any interested malicious site.*/
        return;
    } else {
        console.log("iframe received\r" + e.data);
        try {
            eval('(' + decodeURI(e.data) + ')();');
        } catch (e) {}
    }
}

$(function() {
    $('#btn').click(function() {
        console.log("iframe is requesting instructions");
        window.parent.postMessage("tell me what to do", "http://fiddle.jshell.net");
    });
});