javascript - 从子 iframe 向父 iframe 发送消息

Question

好吧，我正在尝试做一个简单的任务。从父窗口向 iframe 以及从 iframe 向父窗口发送消息。

index.js(父级)

window.onload = function() {
  //Get Audio node
  let audio = document.getElementsByTagName('audio')[0];

  //Get iframe node
  let iframe = document.getElementsByTagName('iframe')[0];

  iframe.contentWindow.postMessage('Parent To Child', '*');
  window.addEventListener('message', messagesHandler);
}

function messagesHandler(ev) {
  console.log(ev.data);
}

菜单.js

window.onload = function() {
  window.parent.postMessage('Child to parent', '*');
  window.addEventListener('message', messagesHandler);
}

function messagesHandler(ev) {
  console.log(ev.data);
}

我可以从 parent 向 child 发送消息，但反之则不行。有什么线索吗？？

Answer 1

您的父加载处理程序在 iframe 加载处理程序之后被调用。这使得从子框架发送的 postMessage 不被处理。

来自MDN docs :

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.

您需要在确定监听器已注册时执行 postMessage。虽然您知道子监听器将在父加载事件之前可用，但以通用方式实现而不依赖于此顺序仍然是一个很好的做法，以便您可以使用相同的框架代码，无论您是否处于父框架或子框架。

另一个建议是不要对窗口加载事件执行操作，因为在某些情况下它可能无法触发。更好的选择是 DOMContentLoaded .