javascript - 对站点之间的 postMessage 感到困惑

Question

我已上传包含以下部分的 HTML:

<script>
window.onload = function(){
  window.addEventListener('message', receiver, false);
}

function receiver(event) {
  if (event.origin == 'http://documentA.com') {
    if (event.data == 'Hello B') {
      //event.source.postMessage('Hello A, how are you?', event.origin);
      alert("Recognized.");
    } else {
      //alert(event.data);
      alert("Unrecognized!");
    }
  }
}
</script>

该文档是可访问的，我可以在浏览器中查看它。然后，我使用 FireBug 打开控制台窗口并输入以下调用(如所述 at Wikipedia )。

window.postMessage("12345", "http://server:port/Index4.htm");

结果我得到未定义，坦率地说，我不知道这是好事还是坏事。可能很糟糕，尤其是因为我看不到任何警报。该怎么办？

Answer 1

首先:

您必须将消息发布到 iframe。尝试使用:

document.getElementById("yourIFrameID").contentWindow.postMessage()

<小时/><小时/>

我在 Opera Dragonfly、Firebug 和 IE9 中执行了以下操作，并且没有任何问题:

//Add iframe: <iframe id="teest" src="http://www.dict.cc/?s=annahme">
var frame = document.getElementById("teest")

切换到 iframe 上下文:

//Add event listener
window.addEventListener("message", function(ev){ console.log(ev.data); }, false);

返回顶部上下文，发送一些内容:

frame.contentWindow.postMessage("foo", "http://www.dict.cc")
//Works. console: "foo"
frame.contentWindow.postMessage("foo", "http://www.dict.cc:80")
//Works. console: "foo"
frame.contentWindow.postMessage("foo", "http://www.dict.cc/?s=annahme")
//Works. console: "foo"
frame.contentWindow.postMessage("foo", "http://dict.cc/?s=annahme")
//Does NOT work. console: Nothing Happened

因此，如果您忘记将正确的子域添加到第二个参数，或者访问“https”页面但字符串中包含“http”，我会遇到困难。
尝试删除事件处理程序中的所有 if，并在使用 if 之前打印出您得到的内容(或者更好地使用 Firebug 或 Dragonfly 检查它)