简单的跨域iframe postMessage在jsfiddle中工作，但不在本地工作

Question

我正试图在另一个域上使用iframe，而我却被困在了＃34; Hello World！＆＃34;阶段。

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

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', '*')
}

注意：在部署代码时，不要忘记将'*'替换为相关的来源。