I am trying to make a data exchange system between two websites at their client sides. I am using EasyXDM for this. (/). Here is my code of parent website:
<!DOCTYPE html>
<html xmlns="">
<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="">
<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 being null or undefined somehow.
I am trying to make a data exchange system between two websites at their client sides. I am using EasyXDM for this. (http://easyxdm/). Here is my code of parent website:
<!DOCTYPE html>
<html xmlns="http://www.w3/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/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 being null or undefined somehow.
- Did you check that socket was properly initialized when your page loads, before clicking send? Shouldn't your script tag be in the head? – rob Commented Jun 30, 2014 at 11:20
- @rob thanks for the response. I finally found the answer and posted it. Check it out. :) – SParc Commented Jun 30, 2014 at 17:14
1 Answer
Reset to default 1I found the solution finally here: https://stackoverflow./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.