html5 postMessage 不工作答案

【问题标题】：html5 postMessage not workinghtml5 postMessage 不工作
【发布时间】：2023-04-06 22:58:01
【问题描述】：

即使我通过 postMessage 反复发送域消息，我的 window.addEventListener 的函数也没有被触发。它似乎根本没有收到任何回应。代码如下：

var myUrl = 'http://localhost:8085';
var newPopup = window.open( myUrl, '_blank', '' );

// Create listener
window.addEventListener('message',function(event) {

  if (event.origin !== 'http://localhost:8085') return;
    console.log('received response:  ',event.data);

},false);

// Setup messenging
setInterval(function(){
    var message = 'Hello!  The time is: ' + (new Date().getTime());
    console.log('blog.local:  sending message:  ' + message);
    newPopup.postMessage(message,'http://localhost:8085');  
},2000);

为什么听者从不接收消息？

【问题讨论】：

标签： javascript html cross-domain postmessage

【解决方案1】：

您在错误的窗口上注册了处理程序。试试

newPopup.addEventListener('message',function(event) {
    ...

【讨论】：

不应该把事件监听器注册到目标窗口，而不是消息发送者（弹窗）吗？
在您的代码中，消息发送者是您当前的窗口，postMessage 的目标是您的弹出窗口。所以监听器应该很可能在弹出窗口中注册。
newPopup.postMessage() 不是表示消息是从 newPopup 发布的吗？
不，它已发布到newPopup，请查看MDN documentation of postMessage。