JSFiddle - React, Tailwind, and code Playground

HTML

<iframe src="/" width="500" height="300" id="one">
    

</iframe>
<iframe src="/" width="500" height="300" id="two">

</iframe>

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;
    }
    window.addEventListener("message",function(e) {
        alert("Frame one:" + e.data);
    });
    //getFrameById('one').postMessage(data, '*');
window.frames[0].postMessage(data, '*');
    console.log('Message sent -->');