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

document.domain

property of both communicating parties are same.

Consider this, say parent page is http://parent.example.com/mypage.aspx . 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 parent.example.com (like http://sub.parent.example.com/myapp.aspx) or in parallel to parent.example.com (like http://sub.example.com/myapp.aspx ).

Once we setup both applications as mentioned above; we can then set the document.domain property to parent.example.com (in case IFrame application is hosted in a subdomain like http://sub.parent.example.com/myapp.aspx) or we need to set the document.domain to example.com (in case the Iframe application is hosted in a parallel domain like http://sub.example.com/myapp.aspx )

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.

<html>

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

.. all other stuff

</body>
</html>

 

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
}
</script>