`Uncaught TypeError:使用EasyXDM发送跨域消息时无法读取未定义`错误的属性'postMessage'

时间:2014-06-29 14:06:22

标签: javascript jquery html html5 easyxdm

我正在尝试在客户端的两个网站之间建立数据交换系统。我正在使用EasyXDM。 (http://easyxdm.net/)。这是我的父网站代码:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>EasyXDM Test</title>
    <script type="text/javascript" src="easyXDM.debug.js"></script>
    <script type="text/javascript">
        var serv_socket = new easyXDM.Socket({
            remote: "http://localhost:39452/EasyXDM/Default.aspx",
            onMessage: function (message, origin) {
                document.getElementById('msg').innerText="Received '" + message + "' from '" + origin + "'";
            },
            onReady: function () {
                serv_socket.postMessage("ID");
            }
        });
    </script>
</head>
<body>
    <form id="form1">
    <div>
    <iframe src="http://localhost:39452/EasyXDM/Default.aspx"></iframe>
        <input type="text" id="msgtext" /><a href="#" onclick="serv_socket.postMessage('d')">Send message</a>
        <div id="msg"></div>
    </div>
    </form>
</body>
</html>

以下是位于localhost:39452域的子网站代码:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Server</title>

</head>
<body>
    <form id="form1">
        <input type="text" id="msgtext" />
        <div>
            <script type="text/javascript" src="easyXDM.debug.js"></script>
            <script type="text/javascript">
                var socket = new easyXDM.Socket({
                    onMessage: function (message, origin) {
                        //document.getElementById('msg').innerText="Received '" + message + "' from '" + origin + "'";
                        socket.postMessage(message);
                    },
                    onReady: function (msg) {
                        socket.postMessage(msg);
                    }
                });
                function send() {
                    socket.postMessage('this is message from server');
                }
            </script>
            <a href="#" id="sender" onclick="send()">Send message</a>
        </div>
    </form>
</body>
</html>

问题是,当我点击子网站上的Send message并致电socket.postMessage()时,它会显示Uncaught TypeError: Cannot read property 'postMessage' of undefined.。请告诉我如何解决这个问题?

更新: socket以某种方式变为空或未定义。

1 个答案:

答案 0 :(得分:1)

我终于找到了解决方案:https://stackoverflow.com/a/13122604/1576363。  我从父级删除了iframe,并将套接字的container属性添加到id的{​​{1}},并且它有效。原因是EasyXDM代码会自动为您的文档添加div。如果您使用子网址添加iframe,则会收到此错误。从链接的答案中,这里有一个明确的解释:

  

&#34;消费者&#34;是父文档,EasyXDM加载   &#34;提供商&#34;这是孩子的iframe。