JSFiddle - React, Tailwind, and code Playground

by Valera Siestov

HTML

<div>
    <input type="text" name="message" value="">
    <button id="button">Отправить сообщение в другие окна</button>
        
    <div id="monitor"></div>
</div>

JavaScript

(function postMessagesDemo() {

    var controls = {},
        handlers = {
            /**
                @method postMessageListener
            */
            postMessageListener: function () {
                var json = JSON.parse(event.data);
                controls.monitor.appendChild(
                    document.createTextNode(
                        'Источник:' + event.origin + 
                        '; Окно отправитель: ' + event.source  + 
                        '; Данные: ' + json.data)
                );

            },
            
            sendMessage: function() {
                window.postMessage('{"data": "Hello Post Message"}', '*');
            }
        };
    
    function getControls() {
        controls.button = document.getElementById('button');
        controls.monitor = document.getElementById('monitor');
    }
    
    function addEventList() {
        if (window.addEventListener) {
            window.addEventListener("message", handlers.postMessageListener, false);
            controls.button.addEventListener('click', handlers.sendMessage, false);
        } else {
            window.attachEvent("onmessage", handlers.postMessageListener);
        }

    }
        
    function init() {
        getControls();
        addEventList();
    }
        
    return init();
}());