5

我使用几行 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：我在 Google Chrome 11 和 Firefox 4 中尝试过

先感谢您。

4

3 回答 3

5

有两个可能的问题：

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

这是一个 jsfiddle，您的代码稍微修改了版本，从我的域中加载了一个文档，适用于 Firefox 和 Chrome。

于 2011-05-17T14:15:41.060 回答
0

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

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

于 2021-07-01T21:21:10.300 回答
0

我知道这已经很晚了，但为了未来......

当您从 iframe 发布消息时，来源不是 iframe 的域，而是父级（目标来源）的域。

示例：父域是http://parent.local并且 iframe 是http://iframe.local

要从 IFrame 发布到父级并且只有有效的父级：

window.parent.postMessage({foo: 12}, 'http://parent.local') // note the domain. we want to talk to only that domain / target origin

父级可以通过检查 MessageEvent 上的 origin 属性来确认请求来自有效的 iframe

window.addEventListener('message', (event) => {
 console.log(event.origin) // will be http://iframe.local
})
于 2021-11-25T08:23:19.107 回答