JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<button type="button" class="open-popup">open popup</button>
<button type="button" class="send-message">send message</button>

JavaScript

/*
 * In window A's scripts, with A being on <http://example.com:8080>:
 */
var button = document.querySelectorAll('button.open-popup'),
    button2 = document.querySelectorAll('button.send-message'),
    popup;

button[0].addEventListener('click', function () {
    popup = window.open('https://jsfiddle.net/shapeshifta/nhtx3p09/4/embedded/result/', 'titel', 'width=420,height=230,resizable,scrollbars=yes');
}, false);

button2[0].addEventListener('click', function () {
    // This does nothing, assuming the window hasn't changed its location.
    popup.postMessage("The user is 'bob' and the password is 'secret'",
        "https://secure.example.net");

    // This will successfully queue a message to be sent to the popup, assuming
    // the window hasn't changed its location.
    popup.postMessage("hello there!", "http://jsfiddle.net");
}, false);

function receiveMessage(event) {
    // Do we trust the sender of this message?  (might be
    // different from what we originally opened, for example).
    if (event.origin !== "http://jsfiddle.net") {
        return;
    }

    alert(event.data);
    console.log(event);
}
window.addEventListener("message", receiveMessage, false);