postMessage 不发送数据答案

【问题标题】：postMessage does not send datapostMessage 不发送数据
【发布时间】：2018-05-09 05:11:33
【问题描述】：

我正在尝试使用postMessage 跨两个窗口发送一些数据。但是，没有通知目标窗口，我找不到原因。这是我的代码：

原始页面（localhost:8080/index.html）：

 <body>    
    <a onclick="popupCenter('http://localhost:58810');" 
     href="javascript:void(0);">CLICK TO OPEN POPUP</a>
    <script>
        function popupCenter(url) {
            const yoyo = window.open(url);
            yoyo.onload(function() {
                yoyo.postMessage("Hello mate", "*");
            }); 
            //setTimeout(yoyo.postMessage.bind(this,"Hello mate", "*"), 3000);
        } 
    </script>
</body>

我已经尝试了上述代码的两个版本：一个在 cmets 内部，一个在上面。它们都不起作用...

目标页面（localhost:58810/index.html）：

<body>
  <script>
    window.addEventListener("message", function(event) {
      if (event.origin !== 'http://localhost') {
        console.log("Far away");
        return;
      }
      console.log("Yes!!!", event.data);
    });
  </script>
  Hello world!!
</body>

目标页面在新窗口中正常加载。但是，即使所有解决方案（stackoverflow 加上其他站点）都表明postMessage 解决了跨域问题，它也没有得到源页面发送的消息。知道为什么吗？

为了使问题更大，永远不会触发onload 事件。所以，当有不同的域时，什么都不起作用（postMessage 和 onload）......

【问题讨论】：

你为什么使用绑定？没有它它应该可以工作，这似乎是这段代码的唯一问题。
我希望bind是问题所在...上面，有一个版本没有bind
@Unknowndeveloper 不过，您改变的不仅仅是 .bind 调用。毫无疑问，问题是.bind。 onload 完全是一个单独的问题

标签： javascript cross-domain

【解决方案1】：

你无法访问窗口yoyo，这就是你需要postMessage的原因，所以你不能在这个窗口上设置onload。最干净的方式可能是 2 路消息传递。像这样的：

const messageFromChild = function(childWindow,event){
        if(event.origin === "http://localhost:58810"){ 
            childWindow.postMessage("Hello mate", "*");
        }
    }
function popupCenter(url) { 
    const yoyo = window.open(url);
    window.addEventListener('message', messageFromChild.bind(this,yoyo));
 }

在目标窗口中：

window.onload = function(){
    window.opener.postMessage("I'm loaded!", "*");
}

window.addEventListener("message", function(event) {
    if (event.origin !== 'http://localhost:8080') {
        console.log("Far away");
        return;
    }
    console.log("Yes!!!", event.data);
});

【讨论】：

【解决方案2】：

所以看起来你在正确的轨道上，但是 setTimeout() 需要一个函数......所以它应该看起来更像这样：

setTimeout(function () {
    youngFashion.postMessage("Hello mate", "*");
}, 3000);

【讨论】：

.bind 返回一个函数。
嗯，它并没有以预期的样式返回它，因为这个例子在 .bind 没有返回时有效。