JSFiddle - React, Tailwind, and code Playground

by blineberry

HTML

<iframe id="iframe" src="//fiddle.jshell.net/blineberry/0ujekbsL/7/show/light/"></iframe>
<div id="content"></div>
<form id="form">
    <textarea id="textarea"></textarea>
    <input type="submit"/>
</form>

CSS

#iframe {
    width: 50%;
    float: right;
}

JavaScript

var form = document.getElementById('form');
var iframe = document.getElementById('iframe');
var content = document.getElementById('content');
var textarea = document.getElementById('textarea');

form.addEventListener('submit', sendMessageToChild, false);
window.addEventListener("message", receiveMessage, false);

function sendMessageToChild(e) {
    e.preventDefault();
    
    iframe.contentWindow.postMessage(textarea.value, "*");
}

function receiveMessage(e) {
    // make sure the message is coming from where we expect    
    if (iframe.contentWindow !== e.source) {
        return;
    }
    
    content.textContent = e.data;
}