Question

我使用几行javascript来创建iframe元素，然后我想发送一条消息，如下所示：

function loadiframe (callback) {
    var body = document.getElementsByTagName('body')[0];
    var iframe = document.createElement('iframe');
    iframe.id = 'iframe';
    iframe.seamless = 'seamless';
    iframe.src = 'http://localhost:3000/iframe.html';
    body.appendChild(iframe);
    callback();
}

loadiframe(function() {
    cpframe = document.getElementById('iframe').contentWindow;
    cpframe.postMessage('please get this message','http://localhost:3000');
    console.log('posted');
})

然后，在http://localhost:3000/iframe.html（iframe的来源）里面是这样的：

<!DOCTYPE html>
<html>
<head>
<title>does not work</title>
<script>
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
  if (event.origin == "http://localhost:3000") {
    document.write(JSON.stringify(event));
    document.write(typeof event);
  }
}
</script>
</head>
<body>
</body>
</html>

但没有任何反应......我甚至试图不使用原产地的安全检查，但即使没有发生任何事情......就像从来没有得到消息......

我是否处于某种异常问题？我试图确保在postMessage消失之前加载了iframe ......

EDIT1：此外，控制台上没有显示错误...

EDIT2：我在谷歌Chrome 11和Firefox 4中尝试过它

提前谢谢。

Answer 1

有两个可能的问题：

您在加载子框架之前调用callback - 在load事件中尝试或在setTimeout
我从来没有设法postMessage使用其他'*'作为起源。如果我在其中放置了一个网址，我会收到一条安全警告“安全错误：http://xxx/的内容可能无法从http://yyy/加载数据”，只有在错误控制台（Ctrl + Shift + J）中没有任何其他地方。我怀疑还有一些其他的东西需要在某个地方设置才能工作，但我还没弄清楚是什么。

Here's a jsfiddle稍加修改的代码版本，将文档从我的域中加载，适用于Firefox和Chrome。

Answer 2

我们的测试设置中出现的一个问题是，放置 iFrame 的托管测试站点是通过文件系统提供的。所以我们切换到 Apache 以通过 localhost 为其提供服务。

iFrame 内的应用程序是一个 Angular 应用程序：从 window.parent 接收事件的事件处理程序绑定在 Angular 应用程序的 ngOnInit 方法内。那也行不通。需要在 index.html 的脚本块中附加事件处理程序。

为什么html5 postMessage不能为我工作？

2 个答案: