Search code examples
javascriptangularcross-browserbroadcastreceiverwindow.open

Comunication between 2 sibling windows opened from parent using Window.open

I am facing issues in Communication between 2 Window I have window P which is the parent window. I open new 2 new window(A, B) using window.open('path',A); and window.open('path',B). Now I need to communicate between A and B. Please help to communicate B/w A and B.

I tried this didn't work

// In A component
window.opener('A').postMessage(JSON.stringify(messageData), "*"); 

//In B component
window.addEventListener("message", this.receiveMessage.bind(this), false);

and also I tried this didn't work

// IN A component
window.open('','A').postMessage(JSON.stringify(messageData), "*");

// IN B component
window.addEventListener("message", this.receiveMessage.bind(this), false);

one more I used BroadCast didn't work

Solution

  • You will need to have message listener in all windows. All the opened windows (here A and B) are going to postMessage() to the window.opener (here P). P will then forward each received message to all windows opened except to the source (origin) of that message.

    Parent.html

    <html>
    <head>
        <script>
            //REM: Contains all opened windows
            const openedWindows = [];

            window.onload = function(){
                //REM: Listener to receive postMessage()
                window.addEventListener('message', function(event){
                    //REM: Just writes the output
                    document.body.appendChild(document.createTextNode(event.data));

                    //REM: Forwards the message to all opened windows but the source
                    for(var i=0, j=openedWindows.length; i<j; i++){
                        if(openedWindows[i] !== event.source){
                            openedWindows[i].postMessage(event.data, '*')
                        }
                    }
                }, false);

                //REM: Opens child window A
                openedWindows.push(window.open('Child.html', 'A'));

                //REM: Opens child window B
                openedWindows.push(window.open('Child.html', 'B'))
            }
        </script>
    </head>

    <body>
    </body>
</html>

    Child.html

    <html>
    <head>
        <script>
            window.onload = function(){
                //REM: Listener to receive postMessage()
                window.addEventListener('message', function(event){
                    //REM: Just writes the output
                    document.body.appendChild(document.createTextNode(event.data));
                }, false);

                //REM: Populating message for demo purpose
                window.setInterval(function(){
                    window.opener.postMessage('Hi! Message from window "' + window.name + '"', '*')
                }, 1000)
            }
        </script>
    </head>

    <body>
    </body>
</html>