3

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

2
  • Do you own domain1 and domain2 ?
    – Mic
    Jan 3, 2011 at 20:58
  • yeap, one app is mine, the other is from a team that is working with us...
    – opensas
    Jan 3, 2011 at 21:05

4 Answers 4

4

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.

3
  • postMessage isn't limited to string data. The standard allows for various things such as objects and ImageData arrays. Also, using window.name no longer works in some modern browsers.
    – Eli Grey
    Jan 3, 2011 at 21:23
  • @Eli, Are you sure about the general availability of non string data with postMessage? JSON would be great... For window.name, it is a hack ;) precisely for older browsers.
    – Mic
    Jan 3, 2011 at 23:25
  • @Eli, Hm, seems there has been some work being done on this since last time I checked, seems now it allows anything that can be cloned w3.org/TR/html5/common-dom-interfaces.html#structured-clone Jan 5, 2011 at 17:24
1

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.

1

Thanks to both answer I found the following:

http://benalman.com/code/projects/jquery-postmessage/docs/files/jquery-ba-postmessage-js.html

http://benalman.com/projects/jquery-postmessage-plugin/

jQuery postMessage enables simple and easy window.postMessage communication in browsers that support it (FF3, Safari 4, IE8), while falling back to a document.location.hash communication method for all other browsers (IE6, IE7, Opera).

With the addition of the window.postMessage method, JavaScript finally has a fantastic means for cross-domain frame communication. Unfortunately, this method isn’t supported in all browsers. One example where this plugin is useful is when a child Iframe needs to tell its parent that its contents have resized.

I'll have a look at it...

0
0

here's a very complete document that analizes the different approaches...

http://softwareas.com/cross-domain-communication-with-iframes

another solution to have a look at

http://easyxdm.net/

with a sample

http://easyxdm.net/wp/2010/03/17/setting-up-your-first-socket/

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.