Question

我正在尝试使用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>

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

目标网页（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）

Answer 1

您无法访问窗口yoyo，这就是您需要postMessage的原因，因此您无法在此窗口上设置onload。最干净的方式可能是双向消息传递。像这样：

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);
});

Answer 2

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

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

postMessage不发送数据

2 个答案: