JSFiddle - React, Tailwind, and code Playground

by Darth Vader

HTML

<p>Send Message to i-frame</p>
<input type="text" id="message" />
<button id="sendMessage">Send</button>
<p>Got Message:</p>
<div id="results"></div>

<button id="close">Close</button>

CSS

.iframe_window {
  width: 640px;
  height: 480px;
}

JavaScript

$(document).ready(function() {
        	$('<iframe />', {
                        name: 'exampleFrame',
                        id: 'exampleFrame',
                        class: 'iframe_window',
                        src: 'https://jsfiddle.net/serendipity/4fqov6zb/embedded/result/'
                    }).appendTo('body');
                    
        });
        
     $("#close").click(function() {
    window.opener = self;
    window.close();

     });
     
     $("#sendMessage").click(function() {
       var message = $("#message").val() || 'No Message!'
     	 $("#exampleFrame")[0].contentWindow.postMessage(message, "*");
     });
     
       /*
       // addEventListener support for IE8
        function bindEvent(element, eventName, eventHandler) {
            if (element.addEventListener){
                element.addEventListener(eventName, eventHandler, false);
            } else if (element.attachEvent) {
                element.attachEvent('on' + eventName, eventHandler);
            }
        }
        // Send a message to the child iframe
        var iframeEl = document.getElementById('the_iframe'),
            messageButton = document.getElementById('message_button'),
            results = document.getElementById('results');
        // Send a message to the child iframe
        var sendMessage = function(msg) {
            // Make sure you are sending a string, and to stringify JSON
            iframeEl.contentWindow.postMessage(msg, '*');
        };
        // Send random messge data on every button click
        bindEvent(messageButton, 'click', function (e) {
            var random = Math.random();
            sendMessage('' + random);
        });
        // Listen to message from child window
        bindEvent(window, 'message', function (e) {
            results.innerHTML = e.data;
        });*/