In cases when we host different applications within Iframe on a web page, we often need them to communicate with each other or just be able to communicate with its host parent.

The basic to have this communication happen is by ensuring that the


property of both communicating parties are same.

Consider this, say parent page is . This page host another application in an Iframe. To have parent and hosted application able to communicate with each other we need to have IFrame application be in either a subdomain of (like or in parallel to (like ).

Once we setup both applications as mentioned above; we can then set the document.domain property to (in case IFrame application is hosted in a subdomain like or we need to set the document.domain to (in case the Iframe application is hosted in a parallel domain like )

We can do so by calling a script function at onload event handler of both parent page and on page which is to be hosted inside the iframe, or by simply doing something like this.


<script language="javascript" type="text/javascript">
document.domain = "somevaliddomain";

.. all other stuff



now, parent and iframe document can communicate without any hassle.
for example iframe document can now call any javascript method on its parent, passing any required data, like shown here

<script language="javascript" type="text/javascipt">

var someValueFromIframe = "test data";
if(parent && parent.SomeFunc && typeof(parent.SomeFunc) == "function")
parent.SomeFunc(someValueFromIframe); // passing to parenthost