时间戳

首页 > 解决方案 > 跨站点 postMessage 未被 addEventListener 拾取

javascript - 跨站点 postMessage 未被 addEventListener 拾取

问题描述

我的网页中嵌入了来自 itch.io 的 iframe。iframe 通过 postMessage 向我发送一条消息：

   //This gets send from a Unity WebGL game
   SendMessageToPage: function (text) {
      var convertedText = Pointer_stringify(text);
      // Pass message to the page
      window.parent.postMessage(convertedText, "*");
   }

父网页（我嵌入 iframe 的网站，所以它应该是父网页，对吗？）应该使用事件监听器来获取它：

 <script>
    alert("Hello")  //<-This one fires
    
    window.addEventListener('message', function(event){ 
      alert("Hello from);
      if (event.origin != 'https://itch.io') { 
        alert("Unknown Source");
        return;
      }
      alert("received: " + event.data)
    });

</script>

另外我有一个 div 元素来接收消息

  <script>
        document.getElementById("WriteOut").addEventListener('message', function(e){ 
          document.getElementById("WriteOut").innerHTML="Got Something";
        });
  </script>

我可以看到 itch 发送的消息出现在控制台日志中，所以我有点怀疑我没有正确配置事件侦听器。该消息也仅在网站加载后很长时间（打开页面后大约 15 秒）才会出现，因此未加载侦听器应该不是问题。

有谁知道发生了什么？据我所知，我通过了正确的论点。

标签： javascriptaddeventlistenerpostmessage

解决方案

我找到了一个修复/真正的问题：由于游戏没有直接在 iframe 中运行，window.parent 没有使用侦听器处理窗口，而是介于两者之间。将其更改为

  //This gets send from a Unity WebGL game
   SendMessageToPage: function (text) {
      var convertedText = Pointer_stringify(text);
      // Pass message to the page
      window.top.postMessage(convertedText, "*");
   }

工作。

推荐阅读