My first thought on how to get around that issue was that I could use a hidden iframe to pass data into. The issue with that is that iframes in different domains can't communicate with each other. Or at least, they can't communicate very easily with each other. In truth, the only control that the parent page has over the child page is the ability to change the child's url. The child page has absolutely no ability to communicate with a parent in a different domain. In theory, that would make responding to an ajax call impossible, but the child iframe can render a child iframe inside of itself that can communicate with its grandparent using window.parent.parent
So you see, we have the ability to do cross-domain iframe communication using a proxy file for the requested domain and a proxy file for the response domain. In the end, the process comes out looking like this:
In order to make the process of cross-domain Ajax calls easier, I've written a jQuery plugin that allows you to put an HTML proxy on both your request domain and your response domain. All of the tricky details are taken care of. Check out the GitHub Repo to get started. I've also created a live demo of the jQuery Ajax Proxy that shows how you can use GET, POST, PUT and DELETE across domains. Let me know what you think.
Subscribe to Tyson Cadenhead
Get the latest posts delivered right to your inbox