JSFiddle - React, Tailwind, and code Playground

by mattography

HTML

<iframe src="http://jsfiddle.net/mattography/tmhfv2ft/1/show" width="500" height="300" id="frame1">
    

</iframe>
<iframe src="http://jsfiddle.net/mattography/tmhfv2ft/1/show" width="500" height="300" id="frame2">

</iframe>

CSS

h1{
    font-family: "Trebuchet MS";
    color: red;
}

JavaScript

var getFontFamily = function () {
    var el = document.getElementsByTagName("h1")[0];
    var cs = window.getComputedStyle(el, null);
    return cs.fontFamily;
}


    var data = "h1";

    function getFrameById(id) {
        for (var i = 0; i < window.length; i++) {
            if (window[i].frameElement.id === id) {
                console.log('found frame in index '+i);
                return window[i];
            }
        }
        return null;
    }
    getFrameById('frame1').addEventListener("message",function(e) {
        alert("Frame one:" + e.data);
    });
    getFrameById('frame1').postMessage(data, '*');
    console.log('Message sent -->');

getFrameById('frame2').addEventListener("message",function(e) {
        alert("Frame one:" + e.data);
    });
    getFrameById('frame2').postMessage(data, '*');
    console.log('Message sent -->');