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

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

javascript html

Javascript 使用postMessage的基本跨域消息传递,javascript,html,cross-domain,postmessage,Javascript,Html,Cross Domain,Postmessage,我正在尝试学习基本的跨域消息传递，我的参考是我在IIS中托管了2个html文件： CrossDomainMessagingDemo/SiteOne/Home.html：使用SiteOne文件夹作为宿主：http://localhost:6080 CrossDomainMessagingDemo/SiteTwo/Home.html：用于托管的Sitewo文件夹：http://localhost:6081 已检查在浏览器中工作的两个URL，即http://localhost:6080/home.h

我正在尝试学习基本的跨域消息传递，我的参考是

我在IIS中托管了2个html文件： CrossDomainMessagingDemo/SiteOne/Home.html：使用SiteOne文件夹作为宿主：

http://localhost:6080

CrossDomainMessagingDemo/SiteTwo/Home.html：用于托管的Sitewo文件夹：

http://localhost:6081

已检查在浏览器中工作的两个URL，即

http://localhost:6080/home.html 和http://localhost:6081/home.html

my 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>

<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>


jQuery（文档）.ready（函数（）{
var popUp=window.open（“http://localhost:6081/home.html");
postMessage（“bob的用户，密码为'abcdpass'”http://localhost:6081");
函数接收消息（事件）{
console.log（事件数据）；
}
window.addEventListener（“消息”，receiveMessage，false）；
});
这是在siteOne中

my Site2/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>

<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>


jQuery（文档）.ready（函数（）{
函数接收消息（事件）{
console.log（事件数据）；
event.source.postMessage（“您好！秘密回复是‘我是蝙蝠侠’”，event.origin）；
}
window.addEventListener（“消息”，receiveMessage，false）；
});
这是第二现场

问题是当我打开

http://localhost:6080/home.html

并尝试在开发人员工具中查看一些控制台日志，没有日志。显然，这条消息没有通过。我做错了什么。我遵循这里提供的示例：

为了进行测试，请尝试发布一条源代码为“*”的消息，看看这是否有效。只是尝试了，没有效果。为了进行测试，请尝试“立即”在sitetwo上运行代码，这意味着没有jQuery（document）.ready（function（）{…}）；包装器…它正在工作：）。但是等一下。。根据学习部分，我仍然不知道前面出了什么问题？现在尝试返回jQuery（document）.ready（function（）{…}）；包装器，但仅在窗口周围。addEventListener（“message”，receiveMessage，false）；将函数receiveMessage保留在包装器之外。