`Uncaught TypeError: Cannot read property 'postMessage' of undefined ` error while sending cross domain messages using EasyXDM

问题

I am trying to make a data exchange system between two websites at their client sides. I am using EasyXDM for this. (http://easyxdm.net/). Here is my code of parent website:

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

And below is the child website's code that is located at localhost:39452 domain:

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

The problem is that, when I click Send message on child website and call socket.postMessage() it says Uncaught TypeError: Cannot read property 'postMessage' of undefined.. Please tell me how to solve this issue?

Update: socket is becoming null or undefined somehow.

回答1:

I found the solution finally here: https://stackoverflow.com/a/13122604/1576363. I removed the iframe from parent and added container property of the socket to the id of a div and it worked. The reason for this was that the EasyXDM code automatically adds an iframe to your document. If you add iframe with the URL of child, you will get this error. From the linked answer, here is the clear explanation:

The "consumer" is the parent document, and EasyXDM loads the "provider" which is the child iframe.

来源：https://stackoverflow.com/questions/24476781/uncaught-typeerror-cannot-read-property-postmessage-of-undefined-error-whi

标签

javascript

jquery

html

html5

easyxdm