简单的跨域 iframe postMessage 在 jsfiddle 中有效但在本地无效

Question

我正尝试在另一个域上使用 iframe，但我卡在了 "Hello World!" 阶段。

我有两个文件，通过两个静态服务器提供服务。我通过两个不同的域和不同的端口引用这些文件。

`http://localhost:8080/index.html`

<iframe id="target" src="http://hocallost:8081/iframe.html" frameborder="1"></iframe>

<script>
    var target = document.getElementById('target');
    target.contentWindow.postMessage('hello', '*');
</script>

`http://hocallost:8081/iframe.html`

<script>
    window.addEventListener('message', function receiveMessage(message) {
        console.log(message);
        document.body.textContent = "Hello World!";
    }, false);
</script>

现在，在本地，消息事件处理程序甚至没有触发。我没有消息，console.log 没有被调用，我的断点没有中断。

当我将 index.html 的源代码粘贴到 JSFiddle 时，它起作用了！事件触发，我得到了 Hello World。

现在，我显然不能在我的生产应用程序上依赖 JSFiddle，我做错了什么？我在这里错过了什么？ JSFiddle 是否在幕后做了一些我没有做的事情？

Answer 1

您似乎没有等待加载目标 iframe。

var target = document.getElementById('target');
target.onload = function(){
    target.contentWindow.postMessage('hello', '*')
}

注意：部署代码时不要忘记用相关来源替换“*”。

简单的跨域 iframe postMessage 在 jsfiddle 中有效但在本地无效

Simple cross-domain iframe postMessage works in jsfiddle but not locally

javascript

iframe

`http://localhost:8080/index.html`

`http://hocallost:8081/iframe.html`