`Uncaught TypeError：使用EasyXDM发送跨域消息时，无法读取未定义`错误的属性'postMessage' [英] `Uncaught TypeError: Cannot read property 'postMessage' of undefined ` error while sending cross domain messages using EasyXDM
问题描述
我正在尝试在客户端的两个网站之间建立数据交换系统。我正在使用EasyXDM。 （ http://easyxdm.net/ ）。这是我的母网站代码：
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>
以下是儿童网站的代码，位于 localhost：39452 域名：
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>
问题在于，当我点击发送消息在子网站上并调用 socket.postMessage（）它说未捕获TypeError：无法读取未定义的属性'postMessage'。。请告诉我如何解决这个问题？
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?
更新： socket 变为null或者以某种方式未定义。
Update: socket is becoming null or undefined somehow.
推荐答案
我终于在这里找到了解决方案：https://stackoverflow.com/a/13122604/1576363 。
我从父级删除了 iframe ，并将套接字的容器属性添加到 id div 并且它有效。原因是EasyXDM代码会自动为您的文档添加 iframe 。如果您使用子网址添加 iframe ，则会收到此错误。从链接的答案中，这里有一个明确的解释：
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:
consumer是父文档，EasyXDM加载
提供者，即子iframe。
The "consumer" is the parent document, and EasyXDM loads the "provider" which is the child iframe.
这篇关于`Uncaught TypeError：使用EasyXDM发送跨域消息时，无法读取未定义`错误的属性'postMessage'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
