JavaScript的postMessage不起作用

Question

JavaScript的postMessage不起作用

javascriptiframepostmessage

28

我不知道该怎么做。我尝试了来自不同来源的几个示例代码，并在不同浏览器中尝试了它们（从Chrome 9到FF 4），但仍然无法通过“postMessage”函数进行通信。

JS控制台没有任何输出，没有任何错误，但仍然没有任何响应：框架之间似乎无法通信。而且这甚至不是跨域问题：两个框架都来自我的域名。

以下是最后一次尝试的示例代码：

父级框架：

<iframe src="IFRAME_URL"></iframe>
<script>
    window.addEventListener( "message",
      function (e) {
            if(e.origin !== 'DOMAIN'){ return; } 
            alert(e.data);
      },
      false);
</script>

子框架:

<html>
<head></head>
<body>
    <script>
        top.postMessage('hello', 'DOMAIN');
    </script>
</body>

非常感谢您的帮助，非常感谢！

- Cystack

你的 iframe 中只有两个层级吗？也许 top 不是你的监听器声明的位置。可以尝试使用 parent.postMessage。 - Mic

尝试使用parent.postMessage，仍然无法工作。 - Cystack

你尝试过我的答案吗：https://dev59.com/7XA75IYBdhLWcg3wH1XP？ - Mic

3

好的，我已经让它起作用了.......... 显然域名结尾不能有斜杠。唉。 - Cystack

啊...我刚刚尝试了一个真实的URL，它正常工作了。可能必须要有一个斜杠 / :) - Mic

4个回答

4

你也可以使用 top.postMessage('hello', "*"); 将消息发送到任何窗口。

Html 1:

<iframe src="IFRAME_URL"></iframe>
<script>
window.addEventListener( "message",
  function (e) { 
        alert(e.data);
  },
  false);
</script>

html 2:

<html>
<head></head>
<body>
    <script>
        top.postMessage('hello', '*');
    </script>
</body>

- user10946822

3

如果您不涉及不同的来源，将location.origin输入作为targetOrigin将会起作用。

top.postMessage('hello', location.origin);

- James Lawruk

1

我不确定安全问题，但通常情况下，我会像这样获取父窗口位置：

var url = (window.location != window.parent.location) ? document.referrer: document.location;
top.postMessage('message', url);

- Phil LaNasa

1

结果是，每个在其页面中包含您的 iframe 的人都将收到这些消息。据我所知，这与使用“*”来代替来源一样不安全。 - RiZKiT

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mic · Accepted Answer

你的 postMessage 的第二个参数必须是像 http://localhost 这样的 URL。