使用postMessage的基本跨域消息传递

时间:2014-09-24 11:48:52

标签: javascript html html5 cross-domain postmessage

我正在尝试学习基本的跨域信息,我的参考文献是https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage

我在IIS中托管了2个html文件: CrossDomainMessagingDemo / SiteOne / Home.html:使用SiteOne文件夹托管为:http://localhost:6080

CrossDomainMessagingDemo / SiteTwo / Home.html:使用SiteTwo文件夹托管为:http://localhost:6081

检查了在浏览器中工作的网址,即http://localhost:6080/home.html and http://localhost:6081/home.html

我的SiteOne / Home.html的内容:

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script>
            jQuery(document).ready(function(){
            var popUp = window.open("http://localhost:6081/home.html");
            popUp.postMessage("The user of bob and the password is 'abcdpass'", "http://localhost:6081");

            function receiveMessage(event){
                console.log(event.data);
            }
            window.addEventListener("message", receiveMessage, false);
            });
        </script>
    </head>
    <body>
        this is in siteOne
        <hr/>
    </body>


</html>

我的SiteTwo / Home.html的内容:

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script>
            jQuery(document).ready(function(){

            function receiveMessage(event){
                console.log(event.data);
                event.source.postMessage("hi there!, the secret response is 'I am Batman'", event.origin);
            }

            window.addEventListener("message", receiveMessage, false);
            });
        </script>
    </head>
    <body>
        this is on sitetwo
    </body>


</html>

问题在于,当我打开http://localhost:6080/home.html并尝试在开发人员工具中查看某些控制台日志时,没有日志。显然,这条消息并没有通过。我在这做错了什么。我按照此处提供的示例进行操作:https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage

0 个答案:

没有答案