postMessage() to child window is failing to post

Question

I am attempting to post a message from a parent window to a child window it opens. However, the message is not getting posted.

In the parent window script:

function editAnnotation(annotKey){
    var annotString = annotToString();

    //open up the child window addAnnot.html.
    var editAnnotWindow = window.open("editAnnot.html", "Ratting","width=200,height=400,0,status=0,scrollbars=1");

    //send a message containing all the info from the current field. This message will cause all the fields to be prepopulated w info from annotation
    editAnnotWindow.postMessage(annotString, '*');
}

In the child window script:

window.onload = addListeners();

/***********************************************************************
*
* Function that adds listeners for messages
*
*/
function addListeners() {

  console.log("addListeners() called");
  window.addEventListener('message', parseMessage, false);//listens for messages from the index.html file page

}


function parseMessage(event){
        console.log("parseMessage() called");
}

addListeners() called is logged, but parseMessage() called is not.

I have already tried:

Changing the order of the functions.
Posting the message when the child window is opened.

E.g.:

var newWindow = window.open("file.html").postMessage("message string", '*');

try this https://stackoverflow.com/questions/40991114/issue-communication-with-postmessage-from-parent-to-child-iframe — xdeepakv, Mar 29 '20 at 05:56
Does this answer your question? [Issue communication with postMessage from parent to child iFrame](https://stackoverflow.com/questions/40991114/issue-communication-with-postmessage-from-parent-to-child-iframe) — xdeepakv, Mar 29 '20 at 05:56
It won't solve your question, but I think this `window.onload = addListeners();` should be this: `window.onload = addListeners;` — Hagai Wild, Mar 29 '20 at 06:18
BTW, I think you should just remove the `window.onload` part, maybe it doesn't get called for some reason, you don't really need to wait for the window to load. — Hagai Wild, Mar 29 '20 at 06:24
FYI, the parent can talk to the child directly `childWindow.document.` etc.... — gman, Mar 29 '20 at 06:59
@gman, oh that would be helpful. Do you have any links you can point me to on this topic? — Yogort, Mar 29 '20 at 14:06

OregonTrail · Answer 1 · 2020-03-29T07:33:03.230

You're calling postMessage in the opener window too early; before script begins executing in the opened window.

Here's a minimal working example of what you can do to fix this. The opened window can tell the opener when it's ready to receive messages using window.opener.postMessage.

index.html

<html>
<head>
  <meta charset="utf-8"/>

  <script>
    window.onload = function () {
      // set this to YOUR domain in production!!
      targetOrigin = '*'; 

      var openedWindow = window.open(
        "popup.html",
        "popup",
        "width=640,height=480"
      );

      function handleMessage (event) {
        if (event.data === 'openedReady') {
          document.body.innerHTML += '<br />';
          document.body.innerHTML += 'got event from opened window!';
          openedWindow.postMessage('openerMessage', targetOrigin);
        }
      }

      window.addEventListener('message', handleMessage, false);
    }
  </script>
</head>
<body>hi</body>
</html>

popup.html

<html>
<head>
  <meta charset="utf-8"/>

  <script>
    window.onload = function() {
      // set this to YOUR domain in production!!
      targetOrigin = '*'; 

      function handleMessage(event) {
        if (event.data === 'openerMessage') {
          document.body.innerHTML += '<br />';
          document.body.innerHTML += 'got event from opener window!';
        } 
      }

      window.addEventListener('message', handleMessage, false);

      window.opener.postMessage('openedReady', targetOrigin);
    }
  </script>
</head>
<body>hi2</body>
</html>

The real question for me is why you're using popups for UI in 2020, but that's another matter entirely.

using `setTimeout` could cause the code to break if a message is sent right after the child window loads. This is a hack :| — Hagai Wild, Mar 29 '20 at 06:45
@HagaiWild I think you mean "right before the child window loads"? — OregonTrail, Mar 29 '20 at 06:46
Oh.. I thought you added the `onmessage` with a timeout, my mistake. but still.. using `setTimeout` is a hack :| — Hagai Wild, Mar 29 '20 at 06:52

postMessage() to child window is failing to post

1 Answers1