个人中心
gpt4 book ai didi

javascript - postMessage() 到子窗口无法发布

转载 作者：行者123 更新时间：2023-12-02 02:56:54 26 4
gpt4 key购买 nike

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

在父窗口脚本中:

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() 会被记录，但调用的 parseMessage() 不会记录。

我已经尝试过:

  1. 更改函数的顺序。

  2. 当子窗口打开时发布消息。

例如:

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

最佳答案

您在 opener 窗口中调用 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，但这完全是另一回事。

关于javascript - postMessage() 到子窗口无法发布，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60910623/

26 4 0
文章推荐： reactjs - Material-UI 主题不会变回来
文章推荐： javascript - 如何等待Firebase存储图像上传，然后运行下一个函数
文章推荐： c++ - 为什么 require 子句中的否定表达式需要括号？
文章推荐： docker - Endorser客户端连接失败: connection refused Error
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com