Cross Sub Domain Javascript (Ajax, Iframe, etc)
So we've been dealing with an issue at work with cross sub domain JS. Basically, JS believes that even a subdomain such as img.yourdomain.com is a different domain from www.yourdomain.com. Because of that, AJAX across pages from those two subdomains will not work. Also if you have an iframe from one to another, you will not be able to refence JS vars or functions back and forth.
After a good bit of digging, I discovered a way around this. This involves setting up an iframe html on one domain and then calling that iframe from the page on the other subdomain. You have to set the document.domain to the same thing on both the parent page and its iframe, in order for them to talk to each other.
document.domain = "yourdomain.com"
Once that is set, the two pages now think they are on the same domain.
For example, for pulling in text, setup your page on www.yourdomain.com and set document.domain to yourdomain.com. If you are trying to pull in an html page using Ajax from img.yourdomain.com, setup a page that, will become the iframe, to do the ajax pull. After that pull is complete set the document.domain to yourdomain.com. In your page on www. create an iframe which has the src set to your page on img. Since document.domain is set, any functions on the parent page are available to be called via the iframe. Lets say you want to put your newly "ajaxed" html into a div on the parent page, you can do that via "parent.getElementById('yourDivName').innerHTML = Response.Text".
If you are pulling in XML, you can setup the page/iframe relationship the same as above. That iframe will make the ajax call to the XML on img.yourdomain.com and do something with it, lets say turn it into an array. Once that is completed, set the document.domain on the iframe page. At this point, the parent page can access that array on its iframe via "iframeName.arrayName". Alternatively you can have an array read on the parent page for this information and pass it to the parent from the iframe via "parent.arrayName = iframeArray".
Labels: All, Javascript
5 Comments:
Thanks! Extremely useful information! If this really works, I owe you much.(I'm after about 1-2 hours of trying and failing with this damn subdomain thing)
Going to try it right now.
This sounds great, however some more details would be appreciated, i.e. more details on the implementation... creating the iframe.. then js to access the iframe.
Thanks You!
The problem is that it _doesn't_ work. At least, it doesn't work in Safari. I haven't tested in FireFox yet, but I'm not confident.
If this only works in IE, then I think it was important that this is mentioned.
Greg.
Oops! Okay, I'm wrong. It DOES work! And work it does! Holy Crap. What a great solution. It works in Safari 3, and FireFox 3, but it is critically important that you set document.domain in both DOM's that you want to have talking to each other.
What I was trying was the first DOM was src'd at blah.site.com and the iframe was at subdomain.blah.site.com, and I was only setting document.domain in the DOM of the iframe to try to match the src'd URL of the main page. This does not work. Even though the main page is src'd at blah.site.com you still have to explicitly set document.domain='blah.site.com' or it won't work.
Yay!
Greg.
Hi,
after a couple of hours of try/fail maddness I would like to ask for more details / implementation example
thanks
Post a Comment
<< Home