html5 PostMessage 跨域-相反版本答案

【问题标题】：html5 PostMessage cross domain - opposite versionhtml5 PostMessage 跨域-相反版本
【发布时间】：2013-01-30 20:06:21
【问题描述】：

我已经创建了从一个域到另一个域的 PostMessage。

在域 A 我有域 B 的框架。我可以将消息从 A 发送到 B。现在我想做相反的事情。我需要框架中的按钮（在弹出窗口上）。当我点击那里时，我需要从 B 向 A 发送消息。

在域 A 上：

       <iframe id="frameId" src="http://b.net/2.html" onload="sendCommand();"> </iframe>

            <script  type="text/javascript"> 
                        function sendCommand() {
                        var receiver;
                        receiver = document.getElementById('frameId').contentWindow;
                        receiver.postMessage(receiver, 'http://b.net');
                        }
                </script>
        </body>
    </html>

在域 B 中：

    <!DOCTYPE HTML>
    <html>
    <head>
    <script>
    var F= function(){}
    </script>

    </head>
    <body>
    Hello THere
     <button onclick="F()">Click me</button>
     <script>
            window.addEventListener('message', function(event) {
            alert(event.origin);
    }, false);

    </script>
    </body>

</html>

【问题讨论】：

标签： javascript html postmessage

【解决方案1】：

我解决了这个问题：

这是一个好的解决方案吗？

<!DOCTYPE HTML>
    <html>
    <head>
    <script>
        var t;  
        function load (){       
                 window.addEventListener('message', function(event) {
                        console.log(event.data) ;                   
                        window.clearInterval(t);
                        return;
                }, false);
       }     
    </script>
    </head>
  <body onload="load()">
            <iframe id="frameId" src="http://b.net/2.html"  onload="sendCommand();">  No Frame!</iframe> 
            <script  type="text/javascript"> 
                    function sendCommand() {
                       //  post massage to domain B
                         var receiver = document.getElementById('frameId').contentWindow;
                         receiver.postMessage("Start listening", 'http://b.net');
                    } 
            </script> 
    </body>
</html>


<!DOCTYPE HTML>
<html>
<head>
<script>
var F= function(){  
    // Send message from Iframe Page to domain A
    parent.postMessage("From Iframe Page ","*");
}
</script>
</head>
<body>
Hello There
 <button onclick="F()">Click me</button>
 <script>
        // Listen events
        window.addEventListener('message', function(event) {
        console.log(event.data)
        }, false);

</script>
</body>
</html>

【讨论】：