Search code examples
javascriptpostmessage

postMessage from an iframe opened in in new window

Please i have a small form that i open on a popop window like below.

<html>
<head>

</head>
<body>
    <div id="popUpDiv" style="display:none;"></div>
<script type="text/javascript"> 
    var popUpWindow;
    function popup(n) {
       popUpWindow = window.open("",n, "height=500,width=500");
    }
    function foo(obj){
    test1 = "http://localhost:3001"; 
    popUpWindow.document.write('<iframe height="450" id="receiver" allowTransparency="true" frameborder="0" scrolling="yes" style="width:100%;" src="'+test1+'" type= "text/javascript"></iframe>');

    } 
</script>

 <a href="#" onclick="popup('popUpDiv');foo(this);">OnSale</a>
</body>
</html>

above is the parent form and is running on the server localhost:3000. I opened new window with an iframe on it. I intend to postMessage from the popup or child window and receive it in the parent window. I then modified my code adding the onload below.

window.onload = function() {.
    var messageEle = document.getElementById('message');
    console.log('its receiving message');
    function receiveMessage(e) {
        alert('received');
        console.log('the origin is ', e.origin);
        if (e.origin !== "http://localhost:3001"){
            return;
        }
        messageEle.innerHTML = "Message Received: " + e.data;
    }
    window.addEventListener('message', receiveMessage);
}

my complete parent page now looks like below.

<html>
    <head>

    </head>
    <body>
        <div id="popUpDiv" style="display:none;"></div>
    <script type="text/javascript"> 
        var popUpWindow;
        function popup(n) {
           popUpWindow = window.open("",n, "height=500,width=500");
        }
        function foo(obj){
        test1 = "http://localhost:3001"; 
        popUpWindow.document.write('<iframe height="450" id="receiver" allowTransparency="true" frameborder="0" scrolling="yes" style="width:100%;" src="'+test1+'" type= "text/javascript"></iframe>');

        } 
     window.onload = function() {
        var messageEle = document.getElementById('message');
        console.log('its receiving message');
        function receiveMessage(e) {
            alert('received');
            console.log('the origin is ', e.origin);
            if (e.origin !== "http://localhost:3001"){
                return;
            }
            messageEle.innerHTML = "Message Received: " + e.data;
        }
        window.addEventListener('message', receiveMessage);
    }
    </script>

     <a href="#" onclick="popup('popUpDiv');foo(this);">OnSale</a>

        <div id="message"></div>
    </body>
    </html>

When i click the onSale link on the parent, it opened my child from the server 3001. However, running on the child console

parent.postMessage('Hello', 'http://localhost:3000');

does not fire the receiveMessage event of the parent. i confirmed my event is attached. I tried everything possible yet nothing change. Please what am i doing wrong ? any help would be appreciated

Solution

  • Sorry , after numerous attempt, 

    parent.opener.postMessage('Hello', 'http://localhost:3000');

    Seems to work fine. Need to study the reason though . Found the answer here