Cross-Domain
On a web page, when the parent window contains a iFrame
child that is pointing to another domain, there is absolutely no way to access the contents of that iFrame
child. In turn, iFrame
child can not access any contents of the parent window. By content, I mean, using something like document.getElementId('frameid').forms[0]
to get a reference to some element, such as a form. There is only one exception to this. If two different domains differ only in your sub- domain. You can use JavaScript to define the domains of the frames for the main domain, and then the frames will be able to access the contents of each.
If the frames are in the same domain, then the frames can access each other. To do this, you should get a reference to the element iFrame
usually through getElementId('frameid')
. So there are two ways to access the window object with iFrame
. The way before IE8
is the normal way.
function getIframeWindow(iframeElement){
return iframeElement.contentWindow || iframeElement.contentDocument.parentWindow;
}
contentWindow
is what was provided by browsers before IE8
. contentDocument.parentWindow
is what exists in modern browsers. You can then use this reference to manipulate DOM
of iFrame
just as you would in the main window.
Some resources about this:
Communication between frames in different domains
So the only useful thing that really can happen between 2 frames in different domains is communication, one frame sending a message to another frame. There are many ways to do this, but the only certainty is that both domains have to be aware of the communication contract. Otherwise, a frame would send a message to another and would be ignored. Or a frame would be listening to a message would never be sent.
Cross-domain communication with different servers
When making a HTTP
request on a web page
of a domain to a server in another domain, the rules are still the same: both domains have to be aware of the communication agreement. If both domains do not agree to send and accept a message format, nothing can happen. For example, it is not possible to make a request
to http://www.google.com (home page)
with any of the following techniques and use the information that is received, because the www.google.com
site is not programmed to know about any particular client making the request. / p>
Form Posting
The most basic way to send a request to a server from a web site is through form post
. It is possible with JavaScript to programmatically add a iFrame
to the parent window. In this iFrame
, you can add a form that points to another domain. In this form, you can add a series of hidden inputs
that represent the information you want to be sent to the domain. You can then submit the form that will make a POST
request to that domain.
There is a small problem with that. When iFrame
receives the response from the other domain, site restrictions will deny other access and you will no longer be able to access the frame to get any information that was sent back. If you simply need to submit information, this technique resolves.
JavaScript (JSONP)
JSONP
is limited in that it can only make requests GET
, not messages. There is no way for a browser to do a POST
for a script tag. Additionally, script files in another domain can not set cookies for that domain.
Ajax
Ajax
allows you to request
asynchronously to the browser. But this technique is the most demanding to do cross-domain communication. By default, you can not make an Ajax request for a different domain than the window that is made. In order to do this, you must use a technique called CORS
. This is an official standard that is becoming more consistent across browsers.
Again, the same principle applies here. Both the client and the server must be aware of each other, so that the communication channel is established. Ajax CORS
has an advantage over JSONP
, where it can make requests POST
and JSONP
not.
Examples of
Cross Domain
- You have to integrate with a third party service (such as a forum) that has a REST API residing in a different source.
- Your
server-side services
are hosted in different (sub) domains.
- Its
client-side
logic is served from a different source than its endpoints
server side.