What cross-document messaging?
It's a communication mechanism between iFrame and it's contianer page.
We use iframes to sustain features offered by different domains, to be usable in our webpage.
Developers had been using different hard solutions like: server-side proxy, url-hashing (which are complex and are workaround solutions) to communicate between iframe and it's parent container page.
HTML5 now offers a direct solution to this scenario, using the postMessage().
Below is the sample example:
Below is the code for container page:
<html>
<head>
<title>Parent-window</title>
<script type="text/javascript">
(window.attachEvent)? window.attachEvent('onmessage',gotMessage) : window.addEventListener('onmessage',gotMessage,true);
function gotMessage(e)
{
document.getElementById("childData").value="Domain:"+ e.domain+"\nData: "+e.data;
}
function UpdateData()
{
var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage(document.getElementById("childData").value, "*");
}
</script>
<style type="text/css">
#childData{
border:1px solid blue;
width:250px;
height:80px;
}
IFRAME{
width:300px;
height:200px;
}
BODY{
margin:20px;
}
</style>
</head>
<body>
<b>PostMessage Testing: This is a Parent window</b><br/>
<iframe id="ifrm" src="IFrame_Child4PostMessage.html"></iframe>
<br/>
Fill the data below and click send.
<br/>
<textarea id="childData"></textarea>
<button onclick="UpdateData()">send</button>
<br/>
<br/>
<i>ref: http://msdn.microsoft.com/en-us/library/cc197015(v=vs.85).aspx</i>
</body>
</html>
Below is the code for iFrame page:
<html>
<head>
<title>Child-IFrame</title>
<script type="text/javascript">
(window.attachEvent)? window.attachEvent('onmessage',gotMessage) : window.addEventListener('onmessage',gotMessage,true);
function gotMessage(e)
{
if (e.data == 'Hello World')
{ document.getElementById("parentData").value="Domain:"+ e.domain+"\nData: "+e.data;
e.source.postMessage('Ping: Received Hello!',"*");
//Here e.source=parent.window; so u can try like this: alert(e.source.location);
} else
{
document.getElementById("parentData").value="Domain:"+ e.domain+"\nData: "+e.data;
}
}
</script>
<style type="text/css">
#parentData{
border:1px solid blue;
width:250px;
height:80px;
}
BODY{
background-color:#ccaa99;
}
</style>
</head>
<body>
<b>PostMessage Testing: This is (IFrame) child window.</b><br/>
Below u will see the data from (cross-domain) parent.<i>HTML5, IE8</i>.
<br/>
<textarea id="parentData"></textarea>
<br/>
<br/>
<i>ref: http://msdn.microsoft.com/en-us/library/cc197015(v=vs.85).aspx</i>
</body>
</html>
we can even pass JSON as parameter.
EX:
parent -> o.contentWindow.postMessage(['one','two'],"*");
child(iframe) -> document.getElementById("parentData").value=e.data[1];
In the above sample codes, in place of "*" we should use, "http://<<remoteDomainName>>" for security purpose.
This feature supported in HTML5 offering browsers: ie8+, opera11 etc.
Download sample code files from
this location.
Reference:http://msdn.microsoft.com/en-us/library/cc197015(v=vs.85).aspx
