postMessage() 到子窗口无法发布答案

【问题标题】：postMessage() to child window is failing to postpostMessage() 到子窗口无法发布
【发布时间】：2020-03-29 05:48:46
【问题描述】：

我正在尝试将消息从父窗口发布到它打开的子窗口。但是，该消息未发布。

在父窗口脚本中：

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, '*');
}

在子窗口脚本中：

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 已记录，但 parseMessage() called 未记录。

我已经试过了：

更改函数的顺序。
在打开子窗口时发布消息。

例如：

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

【问题讨论】：

试试这个stackoverflow.com/questions/40991114/…
这能回答你的问题吗？ Issue communication with postMessage from parent to child iFrame
它不能解决你的问题，但我认为这个window.onload = addListeners();应该是这样的：window.onload = addListeners;
顺便说一句，我认为您应该删除 window.onload 部分，也许由于某种原因它没有被调用，您实际上不需要等待窗口加载。
仅供参考，家长可以直接与孩子交谈childWindow.document. 等......

标签： javascript

【解决方案1】：

您在开启窗口中调用postMessage 太早了；在脚本开始在打开的窗口中执行之前。

这里有一个最小的工作示例，说明您可以采取哪些措施来解决此问题。打开的窗口可以告诉开启者何时准备好使用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>

对我来说真正的问题是，为什么您在 2020 年使用弹出窗口作为 UI，但这完全是另一回事。

【讨论】：

如果在子窗口加载后立即发送消息，使用setTimeout 可能会导致代码中断。这是一个黑客：|
@HagaiWild 我认为您的意思是“在子窗口加载之前”？
哦.. 我以为你添加了 onmessage 超时，我的错。但仍然......使用setTimeout 是一个黑客：|
@HagaiWild 我用可靠的方法更新了这个答案。