implement a callback between two sites - communicating between two sites

Question

I have a web app in http://domain1/app1/called.html, and I want to embed that application inside http://domain2/app2/caller.html with an iframe (or a popup, it's the same)

the user should be able to interact with called.html, until they press a certain button, in that case I need to tell caller.html that the user selected an item from called.html

I tried implementing it with javascript.

in called.html I encode the data in json, and then I execute a "called_callback" javascript function in caller.html, passing the json as a parameter.

if called.html was called with a popup, I issue window.opener.called_callback( jsonData ), if it's an iframe I just issue parent.called_callback( jsonData )

having caller.html and called.html in the same domain everything works fine, but from different domains I get the following errors:

permission denied (on IE6)

and

Unsafe JavaScript attempt to access frame with URL [..]/caller.html from frame with URL [...]called.html. Domains, protocols and ports must match. (on google chrome)

Is it possible to overcome this limitation?

What other way of achieving it can you think of???

I guess caller.html could implement a web service, and I could send the result calling it, but the page caller.html would have to poll in order to detect any change...

So how can one application communicate with another one in a different domain to signal an event???

Answer 1

You can use JSONP to call resources from one domain to another.

You can use window.name as ~2Mb text transfer between cross domain frames for older browser.

Or for modern browser you can use window.postMessage to communicate string data between the 2 frames.

But you need some cooperation from the domains for these techniques to work.

Answer 2

You should look into using JSONP. It is fully supported in jQuery if you are using that particular framework. It allows you to use JSON across domains.