iFrame window.postMessage - 数据始终为空字符串答案

【问题标题】：iFrame window.postMessage - data is always an empty stringiFrame window.postMessage - 数据始终为空字符串
【发布时间】：2020-03-21 06:18:47
【问题描述】：

我正在尝试在我的 Angular 应用程序中向 iFrame 发布消息。消息进入 iFrame；但是，传递的数据始终在 iFrame 中作为空字符串接收。

任何想法为什么会这样？

注意：这两个应用程序都在本地运行。

在我的 Angular 应用程序中：

html：

<iframe id="authIFrame" src="http://127.0.0.1:9000"></iframe>

ts：

const wn = document.getElementById('authIFrame').contentWindow;
wn.postMessage({authToken: 'abcdefg'},  '*');

在 iFrame 中：

if (window.addEventListener) {
    window.addEventListener('message', handleMessage, false);
  } else if (window.attachEvent) {
    window.attachEvent('onmessage', handleMessage());
  }

  function handleMessage(event) {
 //HERE>>>>  event.data is always "" (empty string)
    const {data, origin, source} = event;

    if (isOriginAllowed(origin)) {

      const {method, accessToken, idToken, userData} = data;

      if (method === 'SET') {
        return setIdentityData(accessToken, idToken, userData);
      } else if (method === 'GET') {
        return getIdentityData();
      }
    }
  }

我还尝试对传递给 iFrame 的数据进行字符串化。它没有帮助。

我唯一的猜测是浏览器可能拒绝发送数据，因为我的应用程序没有通过 https 运行...

【问题讨论】：

我还尝试对传递给 iFrame 的数据进行字符串化。它没有帮助。
不应该以您的应用程序正在运行的另一个本地主机为目标吗？
是的。我更新了它。仍然有同样的问题。
您找到答案了吗？我在生产的 Firefox 浏览器中遇到了同样的问题，但无法在本地重现。

标签： javascript postmessage

【解决方案1】：

您的数据在加载 iframe 之前总是空的，只需在加载 iframe 后发送数据

authIFrame.addEventListener('load',()=>{
    //your code paste  here
})

【讨论】：

作者说他的iframe收到消息没问题。如果 iframe 没有加载，他就不会得到这个事件。
@DanMacák 然而，感谢您的 10K+ 代表，您可以看到这是 OP 面临的问题，正如他们在现已删除的答案中所说的那样。想帮助关闭这个“没有复制”吗？所描述的问题无法重现。
@Kaiido 真的，我忽略了已删除的答案（由于其不合格的样式）。