easyXDM
A javascript library providing cross-browser, cross-site messaging/method invocation.
easyXDM - Cross-domain messaging made easy easyxdm is a library providing a flexible, reliable, secure and easy to use solution for cross domain messaging and remote procedure calls. easyxdm enables you to work around the same origin policy (sop).
Hi I have a very strange problem when trying to make PUT request using easyXDM.
that.xhr.request({
url: url,
method: "PUT",
data: [{"foo":"test"}],
headers: { "Content-Type": "application/json;" }
}, function (response, xhr) {
options.success(jQuery.parseJSON(response.data));
},function(err) {
alert(err);
});
This does not generate request body message, instead it treats data as query string parameter. Is there anything that can be done regarding this?
Thnx
Source: (StackOverflow)
I'm trying to implement easyXDM into our current project so that users were able to work with several systems during one workflow with access from a single interface. In other words when a user opens page X the application from another domain should be loaded into an iframe for user to work with (user must authenticate first).
The task itself has a requirement that a certain part of an application should be opened depending on some conditions (lets say that for user from department A we should open form Af in the said application).
So here is the logic I'm trying to code here:
- User opens page X (the Consumer)
- Iframe with application's login page (the Provider1) is loaded into iframe on Consumer
- User logs into the application
- JS on the Consumer receives headers from the Provider1
- JS on the Consumer loads Provider2 with headers received earlier and tells the Provider2 to navigate to a certain form
- JS inside the Provider2 receives a message from the Consumer and navigates to a certain form inside this application.
Here's what I got for now (pretty much a simple example from easyXDM readme):
Provider
var socket = new easyXDM.Socket({
onMessage: function(message, origin){
// do something
}
});
Consumer
var socket = new easyXDM.Socket({
remote: "http://remote/page",
container: "test",
onMessage: function(message, origin){
alert("Received '" + message + "' from '" + origin + "'");
var socket1 = new easyXDM.Socket({
remote: "http://remote/page2",
container: "test",
headers: providers2_headers,
onMessage: function(message, origin){
alert("Received '" + message + "' from '" + origin + "'");
},
onReady: function() {
this.container.getElementsByTagName("iframe")[0].style.width = "100%";
socket1.postMessage("Yay, it works!");
}
});
},
onReady: function() {
this.container.getElementsByTagName("iframe")[0].style.width = "100%";
socket.postMessage("Yay, it works!");
}
});
The question
How to get headers from the Provider1 and use them to load the Provider2?
Source: (StackOverflow)
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 rel='nofollow' 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 rel='nofollow' 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.
Source: (StackOverflow)
I'm using easyXDM 2.4.17.
I've setup RPC with a remote 'tunnel.html' which makes AJAX calls using jQuery.
For all modern browsers (those with postMessage) everything is working fine.
When I test on ie7 easyXDM falls back to the HashTransport and everything still works fine except I never see the AJAX response. I can see the request is actually coming back just fine but my callback is just never being fired for some reason.
My tunnel.html file looks like this:
<!DOCTYPE html>
<html>
<!--[if lt IE 9]>
<script type="text/javascript" language="javascript" src="https://mydomain.net/json2.min.js"></script>
<![endif]-->
<script src="https://mydomain.net/easyXDM-2.4.17.js"></script>
<script src="https://mydomain.net/jquery-1.10.2.min.js"></script>
<script>
function apiTunnel (endpoint, params, method, callback) {
var options = {
url: endpoint,
data: params,
type: method,
complete: function (xhr) {
var response = {};
try {
response.data = JSON.parse(xhr.responseText);
} catch (ex) {
response.error = xhr.responseText;
}
callback(response);
}
};
jQuery.ajax(options);
}
var rpc = new easyXDM.Rpc({}, {local: { apiTunnel: apiTunnel }, serializer: JSON});
</script>
</html>
UPDATE: after some debugging it looks like my response is getting stuck in the queue. The tunnel side is failing on an image from the host page. This clogs the queue and never lets my AJAX response through. Any ideas?
UPDATE 2 If I set a timer to remove the waiting lock and dispatch the queue after 2 seconds it works.
I don't feel great about this but it does work. I'm not sure why the initial call is failing -- I'd much rather fix the root issue if possible, I'm just not sure I fully understand what the root issue is.
Source: (StackOverflow)
is there a way to send a AJAX post to a PHP page that is in a server that I don't have access? The server always send Access Control Allow Origin error, because I'm sending a post from my server (that I have access) to another server (that I don't' have access). It seems that this server that I don't own only accepts post from it.
Any code, tip? I found easyxdm to do that but I don't' know how to use it.
Source: (StackOverflow)
i simply need to load a cross-domain asp.net page using jQuery's load() function, but this page can trigger a redirect (i have access to both Server and Client pages).
The loaded page is an asp.net page and i use from server:
Response.Redirect("http://www.google.it")
but chrome cancels the redirect request. I already googled a lot about this and lot of people say "use CORS", i can't because cors are not supported on IE7 and i need to support that browser.
I tried with Custom Headers but seems like i can't read those from a cross domain, even if the server have this in web.config:
<customHeaders>
<add name="Access-Control-Allow-Headers" value="*" />
<add name="Access-Control-Allow-Origin" value="http://10.0.0.158" />
<add name="Access-Control-Allow-Methods" value="*" />
<add name="Access-Control-Allow-Credentials" value="true" />
<add name="Access-Control-Expose-Headers" value="*"/>
</customHeaders>
Yes, http://10.0.0.158 is my local "client page" ip.
After some googling i read about easyXDM libraries but i'm still not sure they can do the trick. Can i use those? How? Have i other alternatives?
Ps: i get the header with this:
jQuery('body').bind('ajaxSuccess',function(event,request,settings){
console.log("ajaxSuccess triggered: "+request.getAllResponseHeaders());
});
and it writes only this:
Content-Type: text/html; charset=utf-8
Cache-Control: private
with fiddler the header is a lot bigger with all my custom headers.
Source: (StackOverflow)
How can I dynamically update the consumer's location using easyXDM?
I've tried the following code without success.
Provider
var socket = new easyXDM.Socket({
onReady: function(){
socket.postMessage("update-remote");
},
onMessage: function(message, origin) {
alert("received " + message + " from " + origin);
}
});
Consumer
var socket = new easyXDM.Socket({
remote: "http://remotedomain/page1.html",
remoteHelper: "http://remotedomain/name.html",
onReady: function(){
socket.postMessage("foo-message");
},
onMessage: function(message, origin) {
if(message="update-remote") {
this.remote = "http://remotedomain/page2.html",
}
alert("received " + message + " from " + origin);
}
});
Source: (StackOverflow)
Does anyone know if you require the "name.html" easyxdm file when resizing a browser cross-domain, and if you do, where do you tell easyxdm to look for it?
I currently pull a booking form from another website in an iFrame, however I can't see any examples where the name.html is referenced, so I'm worried I haven't set it up correctly.
The page does appear to work though, I'd just like to make sure I have everything covered.
A demo of what I'm using is here: Test page pulling data from dev site on another domain.
Here is my easyxdm code on the consuming website, should it perhaps be specified somehow in this javascript?
<div id="container" style="width: 100%;"><div id="loadingmsg" style="color:white; font-size: 12pt;">Loading...</div></div>
<script type="text/javascript">
new easyXDM.Socket({
remote: "http://dev.ultimatetripstore.com/Book/Arrival-External?pid=1&SkinSrc=/portals/_default/skins/_default/no%20skin&ContainerSrc=/portals/_default/containers/_default/no%20container&bgcolor=000&fontcolor=fff&themecolor=d80c8c&hcolor=ffffff",
swf: "http://dev.ultimatetripstore.com/easyxdm.swf",
container: document.getElementById("container"),
onMessage: function(message, origin){
this.container.getElementsByTagName("iframe")[0].style.height = message + "px";
this.container.getElementsByTagName("iframe")[0].style.width = "100%";
this.container.getElementsByTagName("iframe")[0].frameborder = 0;
this.container.getElementsByTagName("iframe")[0].style.border = "0px solid red";
this.container.getElementsByTagName("iframe")[0].scrolling="no";
}
});
</script>
Source: (StackOverflow)
(1) We are trying to do a cross domain ajax call using easyxdm. We encounter the following transient error once in a while
net_error = -118 (ERR_CONNECTION_TIMED_OUT) on Chrome or Aborted on Mozilla. When we check the apache server logs we can't find any exceptions logged.
When we check in chrome net internals this is what we see. Only when we see Top Priority = HIGHEST, Connect jobs >= 2 we see this error !
(2) If the cross domain ajax call succeeds then we are using easyxdm socket to load our content in an iframe. But we again encounter the following transient issue in Chrome. Didnot check mozilla behaviour
Caution: Request is stalled, or TTFB time is about a min & sometimes around 2-3 mins
Source: (StackOverflow)
We're developing a Javascript SDK which is used by embedded applications (injected in my site as IFRAMEs) to help them use some resources like loading some dialogs: e.g. an authorization dialog or a share box(like Facebook).
Our SDK is using easyXDM to work more or less like this:
HTML Page
----------------------------------------------------------------------------------------------------------------------------
| http / https: www.mysite.com/embedded-app/
| (Some JS classes)
|
|- - - - - | ------------------------------------------------------------------------------------------------------------------
|- - - - - | (IFRAME)
|- - - - - | https: // www.some-embedded-app-domain.com/page.html
|- - - - - | (loads and instantiates the SDK from "http/https:www.mysite.com/sdk.js that uses easyXDM)
|- - - - - |
|- - - - - | - - - - - |---------------------------------------------------------------------------------------------------
|- - - - - | - - - - - | (IFRAME injected by easyXDM)
|- - - - - | - - - - - | http / https: www.mysite.com/embedded_provider.html
|- - - - - | - - - - - | (Communication with window.top to talk to use those wndow.top JS classes)
|- - - - - | - - - - - |
|- - - - - | - - - - - |
|- - - - - | - - - - - |
|- - - - - | - - - - - |
My site can be loaded both using http/https, but the embedded application must be served using always HTTPS. In order to allow the inner iframe injected by easyXDM to communicate with my site, the host and protocol must match in both urls, otherwise a same origin policy violation will arise.
Problem: how would I tell the code from the SDK, which is loaded from an external app URL, that the outer windows (my site) is using http or https, to render the embedded_provider.html using the same protocol and thus allowing JS communication between both of them?
The only solution I can think of is to inform the embedded app somehow that we're currently browsing from http / https, and then it can instantiate it properly (using a flag use_https or so), but I'd prefer to not force the App to know the protocol we are using.
Do you know any other alternative?
Thanks!
Source: (StackOverflow)
I use easyXDM to to make a cross domain ajax connection, on first time loading in chrome, everything is fine, however if you press enter in the address bar to refresh it gets stuck and the connection doesn't seem to be made and the rest of the code in my javascript doesn't run. If you click on the refresh button it connects and runs the rest of the code. Any reason why this might be happening? Only happens in chrome it seems.
Thanks!
I have this set up before document ready as in the demos they show.
/* EasyXDM remote request */
var xhr = new easyXDM.Rpc({
remote: "http://domain/com/misc/cors/"
},
{
remote: {
request: {}
}
});
Source: (StackOverflow)
I have to place the content of service provider in an iframe on parent website.
The height of the iframe content would dynamically change depending on user interaction.
Problem I face is that there is some extra height added to the iframe. I'm not sure where the height is coming from.
Any insight appreciated.
LINK TO PAGE
Source: (StackOverflow)
I have followed the instructions here and here but am not able to implement easyXDM correctly to auto-size the height of my iframe.
On the page with the iframe (host.html), I can see the contents I am importing (otherdomain.html) but the height of the iframe is much shorter than the contents, and the height does not change. Unfortunataely this is on a development site I can not link to here.
otherdomain.html has elements that expand on click so I need the iframe to expand and contract as the contents of the page do so.
Can anyone tell me what I am doing wrong please? These are two different domains/servers I am working with. This is the first time I have set up a socket or done anything like this - I don't see any errors in the console but I can't make much sense out of the what it is telling me.
Here is a similar question, but was not answered: IFrame resizing with easyXDM
Here is what I have on the page that has the iFrame:
<style type="text/css">
div#embedded iframe {
width: 725px;
}
</style>
<script src="../js/easyXDM.debug.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
new easyXDM.Socket({
remote: "http://lcoawebservices.com/careers/resize_intermediate.html?url=job-postings.php",
container: "embedded",
onMessage: function (message, origin) {
var settings = message.split(",");
this.container.getElementsByTagName("iframe")[0].style.height = settings[0];
this.container.getElementsByTagName("iframe")[0].style.width = settings[1];
}
});
</script>
<div id="embedded"></div>
Here is what I have on resize_intermediate.html:
<script type="text/javascript" src="../scripts/easyXDM.debug.js">
</script>
<script type="text/javascript">
var iframe;
var socket = new easyXDM.Socket({
swf: "../scripts/easyxdm.swf",
onReady: function(){
iframe = document.createElement("iframe");
iframe.frameBorder = 0;
document.body.appendChild(iframe);
iframe.src = easyXDM.query.url;
},
onMessage: function(url, origin){
iframe.src = url;
}
});
//Probe child.frame for dimensions.
function messageBack(){
socket.postMessage ( iframe.contentDocument.body.clientHeight + "," + iframe.contentDocument.body.clientWidth);
};
//Poll for changes on children every 500ms.
setInterval("messageBack()",500);
</script>
<style type="text/css">
html, body {
overflow: hidden;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
iframe {
width: 100%;
height: 100%;
border: 0px;
}
</style>
and at the bottom of the page I am importing I have placed this:
<script type="text/javascript">
window.onload = function(){
parent.socket.postMessage(document.body.clientHeight || document.body.offsetHeight || document.body.scrollHeight);
};
</script>
Source: (StackOverflow)
I am trying to get a cross domain AJAX post to work using the easyXdm library.
In my local development environment I have two sites:
1. http://localhost/MySite/ws/easyXDM/cors/index.html (EasyXdm file)
2. http://localhost/MyClientSite/TestPage.html (AJAX post from here)
TestPage.html (AJAX Post)
var rpc = new easyXDM.Rpc({
remote: "http://localhost/MySite/ws/easyXDM/cors/index.html"
},
{
remote: {
request: {}
}
});
rpc.request({
url: "http://localhost/MySite/ws/MyService.asmx/DoSomething",
method: "POST",
data: jsonData
}, function(response) {
console.log(JSON.parse(response.data));
$('#thanksDiv').fadeIn(2000, function () {
$('#thanksDiv').fadeOut(4000);
});
});
When I do the AJAX post I get the following in my browser's console:
easyXDM present on 'http://localhost/MySite/ws/easyXDM/cors/index.html?xdm_e=http%3A%2F%2Flocalhost%2FMyClientSite%2FTestPage.html&xdm_c=default884&xdm_p=4
native JSON found
easyXDM.Rpc: constructor
{Private}: preparing transport stack
{Private}: using parameters from query
easyXDM.stack.SameOriginTransport: constructor
easyXDM.stack.QueueBehavior: constructor
easyXDM.stack.RpcBehavior: init
{Private}: firing dom_onReady
... deferred messages ...
easyXDM.Rpc: constructor
{Private}: preparing transport stack
{Private}: using parameters from query
easyXDM.stack.SameOriginTransport: constructor
easyXDM.stack.QueueBehavior: constructor
easyXDM.stack.RpcBehavior: init
... end of deferred messages ...
easyXDM.stack.SameOriginTransport: init
easyXDM.stack.RpcBehavior: received request to execute method request using callback id 1
easyXDM.stack.RpcBehavior: requested to execute procedure request
easyXDM.stack.QueueBehavior: removing myself from the stack
Problem: The web service never actually receives the data. This is obvious as my AJAX post success function should show a thanksDiv and also a record should be created in the *database.
Note: I am replacing my existing AJAX post code as I need to use easyXdm to overcome an issue with Internet Explorer 6 and 7 on a client's site.
Additional Information:
The file-structure where my easyXdm files are located is as follows:
/ws/easyXDM/easyXDM.debug.js
/ws/easyXDM/easyXdm.swf
/ws/easyXDM/json2.js
/ws/easyXDM/name.html
/ws/easyXDM/cors/index.html
Source: (StackOverflow)
I am trying to use two easyXDM sockets on a single parent page without success. Both the sockets connect to the same remote domain but different endpoints. The parent page has two divs false_app_div and dummy_app_div.The following shows the code snippets -
On the parent page I have two JS functions activate_false_app() and activate_dummy_app().
window.loadScript = function(src, onload, onerror) {
var head = document.getElementByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = src;
if (script.readyState) {
script.onreadystate = function() {
var state = this.state;
if (state === 'loaded' || state === 'complete') {
script.onreadystate = null;
onload();
}
};
}
};
window.activate_false_app = function() {
var exdm_url = 'http://localhost:8000/js/easyXDM/easyXDM.min.js';
on_load_fn = function() {
window.init_false_app_communication();
};
on_error_fn = function() {
return false;
};
window.loadScript(exdm_url, on_load_fn, on_error_fn);
};
window.init_false_app_communication = function() {
var false_app_socket = new easyXDM.Socket({
remote : 'http://localhost:8000/false_app',
swf : 'http://localhost:8000/js/easyXDM/easyXDM.swf',
container : 'false_ap_div',
onMessage : function(message, origin) {
alert('false_app onMessage');
alert(message);
}
});
};
window.activate_dummy_app = function() {
var exdm_url = 'http://localhost:8000/js/easyXDM/easyXDM.min.js';
on_load_fn = function() {
window.init_dummy_app_communication();
};
on_error_fn = function() {
return false;
};
window.loadScript(exdm_url, on_load_fn, on_error_fn);
};
window.init_dummy_app_communication = function() {
var dummy_app_socket = new easyXDM.Socket({
remote : 'http://localhost:8000/dummy_app',
swf : 'http://localhost:8000/js/easyXDM/easyXDM.swf',
container : 'dummy_app_div',
onMessage : function(message, origin) {
alert('dummy_app onMessage');
alert(message);
};
});
};
If in the parent page, I call either activate_dummy_app() or activate_false_app(), it works - that is both work completely fine in isolation. But if I call both, then only one of them works and I get an error on the JS console, that something is undefined (which I could not find).
Also, I know that the problem has something to do with loading two easyXDMs because if I put init_dummy_app_communication in the on_load_fn of activate_false_app() (in addition to init_false_app_communication already present), then both works.
However, I cannot be sure that easyXDM is already loaded, so both activate_false_app and activate_dummy_app has to load easyXDM, so that they work in isolation as well as together. I tried working with noConflict function, but the documentation there is poor and ended up with nothing concrete there.
Has someone faced a similar problem or knows what I am missing here?
Source: (StackOverflow)