Thursday, January 6, 2011

HTML5: Cross-Document Messaging

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

2 comments:

  1. wonderful information, I had come to know about your blog from my friend nandu , hyderabad,i have read atleast 7 posts of yours by now, and let me tell you, your website gives the best and the most interesting information. This is just the kind of information that i had been looking for, i'm already your rss reader now and i would regularly watch out for the new posts, once again hats off to you! Thanks a ton once again, Regards, Html5 online trainingamong the Html5 in Hyderabad. Classroom Training in Hyderabad India

    ReplyDelete
  2. This is a very useful article, Great work
    html5

    ReplyDelete