使用postMessage()方法未被接收到

Question

使用postMessage()方法未被接收到

7

我相信这只是我的语法问题，但我正在尝试向iframe发送变量（供colorbox使用）。目前为止，我在两端都接受任何域名（只是为了让它工作）。以下是用于发送页面的js：

$(document).ready(function() {
 if(window.location.hash) {
  var urlimage = window.location.hash.substring(1);
  targetiframe = document.getElementById('wbgallery').contentWindow;
  targetiframe.postMessage(urlimage, "*");
  console.log(urlimage);
 }
});

这里是接收页面：

$(document).ready(function() {    
 window.addEventListener('message',receiveMessage);
 console.log(event);
 function receiveMessage(event) {
   if (origin !== "*")
   return;
   inbound = event.data;
   console.log(inbound);
 }
});

我查看了urlimage的控制台日志，可以看到一个事件，但是没有入站事件。我正在使用Mozilla的说明来尝试理解这一切。

- Daniel

1

receiveMessage 使用了从未被设置的变量 origin，因此它返回。 - Barmar

你还在函数外部使用了带有 event 参数的 console.log(event)。这是什么意思？ - Barmar

我猜 origin 应该是 event.origin，但你为什么要费心处理它呢？它永远不可能是 *，它总是一个 URL。 - Barmar

@Barmar 我在 jQuery 之外的领域有些薄弱，我已经尝试了不同的语法组合大约一两个小时。我甚至删除了 if 语句，认为接收到消息后会触发控制台日志 - 但没有运气。然后我想也许需要 origin，所以把它放回去了。我似乎无法在 recieveMessage 函数中实现任何“操作”，我应该放什么？ console.log(event) 只是为了看看是否有任何显示。在一个 SE 问题上看到别人这样做，我想我也试试。 - Daniel

在 iframe 中添加 message 事件监听器并加载页面之前，您已经发送了消息。我使用了 setTimeout 函数将发送代码延迟了1秒，这样就解决了问题。 - Barmar

@barmar 哇哦！就是这个了！看来我所有的语法都没问题，只是时机不对……这也是另一个需要克服的挑战，但我认为它更可行了。谢谢。如果你想把它作为答案添加，我很乐意将其标记为答案。 - Daniel

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Barmar · Accepted Answer

在iframe加载页面之前发送了消息，因此无法建立message监听器。

您可以让iframe在就绪时向父级发送消息，然后再发送消息。

父级代码：

$(document).ready(function() {
  if (window.location.hash) {
    var urlimage = window.location.hash.substring(1);
    var targetiframe = document.getElementById('wbgallery').contentWindow;
    $(window).on("message", function(e) {
      targetiframe.postMessage(urlimage, "*");
      console.log(urlimage);
    });
  }
});

嵌入代码：

$(document).ready(function() {
  $(window).on('message', function(event) {
    inbound = event.data;
    console.log(inbound);
  });
  window.parent.postMessage("ready", "*");
});