JSFiddle - React, Tailwind, and code Playground

by ovfiddle

HTML

<iframe src="http://fiddle.jshell.net/ovfiddle/GTZsV/show/" width="400" height="150"></iframe>

JavaScript

document.domain = "fiddle.jshell.net"; //sync the domains

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("parent received\r" + e.data);
        if (e.data == "tell me what to do") {
            //if the iframe requests what to do, we pass it a serialized method
            console.log("parent is sending instructions");
            e.source.postMessage(serializeFunction(doSomething), "http://fiddle.jshell.net");
        }
    }
}

function serializeFunction(f) {
    if (typeof f === 'function') {
        return encodeURI(f.toString());
    } //this should really be handled more gracefully
}

function doSomething() {
    alert("hello world!");
}