JSFiddle - React, Tailwind, and code Playground

by tobint

HTML

<div id="popupCreator">Click to Activate</div>

<div id="nodeToMove">Move me</div>

<div id="messages">
</div>

<div id="iframemessages">
    <iframe id="myFrame" src="https://fiddle.jshell.net/tobint/uxszb6ud/4/show/light/" width="100%" height="300">
    </iframe>
</div>

CSS

body {
    font-family: 'segoe ui'
}

#iframemessages {
    margin-top: 20px;    
    background-color: #ffb603;
}
#myframe {
    width : 100%;
    height: 800px;
    border: 1px solid #c0c0c0;
}

#popupCreator {
    width: 200px;
    height: 35px;
    background-color: #f0f0f0;
    text-align: center;
    padding-top: 15px;
    cursor: pointer;    
}

JavaScript

var domain = 'https://fiddle.jshell.net';
var popup = null;
var msgs = null;
var running = false;
var iframe = null;
var moveMe = document.getElementById("nodeMoveMe");
var popupActivator = document.getElementById("popupCreator");


popupActivator.addEventListener("click", function(e) {

        msgs = document.getElementById("messages");
        running = true;
        iframe = document.getElementById("myFrame").contentWindow;
    
        popup = window.open( domain + 
                     '/tobint/uxszb6ud/4/show/light/', 
                     'pml');
    }, 
false);


setInterval(function() {
        if(!running) return;

        var msg = 'Hello! The time is : ' + (new Date().getTime());
        logWindow("sending message: " + msg);
        popup.postMessage(moveMe, domain);
        iframe.postMessage(moveMe, domain);
    },
6000);

window.addEventListener('message', function(event) { 
    if(event.origin != 'https://jsfiddle.com') return;
    console.log('response: ', event.data);
}, false);


function logWindow(msg) {
    msgs.innerHTML += msg + "<br/>";    
}