CODEWITHSUNDEEP
javascriptpostmessage
Yogort
Yogort

Reputation: 107

postMessage() to child window is failing to post

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:

  1. Changing the order of the functions.

  2. Posting the message when the child window is opened.

E.g.:

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

Upvotes: 2

Views: 3151

Answers (1)

OregonTrail
OregonTrail

Reputation: 9049

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.

Upvotes: 5

Related Questions