跨域父子窗口iframe使用postMessage通信时event属性undefined问题求助

嘿，我一眼就看到你代码里的几个小问题，正是它们导致了event.origin和消息内容显示undefined的情况，咱们一步步来修正：

问题1：父窗口的消息内容有多余引号 #

你父窗口里的postMessage("sent'", "https://iframeURL.net")多了一个单引号，这会导致传递的消息变成'sent'（带引号），虽然这不是核心问题，但先修正它：

var otherFrame = document.getElementById("otherFrame").contentWindow;
otherFrame.postMessage("sent", "https://iframeURL.net");

问题2：子窗口的两个关键拼写/属性错误 #

你的子iframe代码里有两个致命错误：

1. 拼写错误：把event.origin写成了event.orgin（少了一个i），这直接导致这个属性变成undefined；
2. 属性使用错误：postMessage传递的消息内容是存在event.data里的，而不是event.message，后者根本不是该事件对象的标准属性。

修正后的子iframe代码：

function receiveMessage(event){
  if (event.origin !== "https://parentURL.com") return;
  console.log(event.origin + " " + event.data);
};
window.addEventListener("message", receiveMessage, false);

验证一下 #

现在再运行代码，你应该就能在控制台正确看到发送方的域名和传递的消息内容了。核心就是要注意postMessage事件对象的标准属性拼写和用法，别犯这种容易忽略的小错误~

内容的提问来源于stack exchange，提问作者Levi Villarreal