Tuesday, November 18th, 2008

Using HTML 5 postMessage

Category: HTML

<p>One of the cool new features in HTML 5 is Cross Document Messaging. What makes this feature really nice is that all the next-generation browsers support it: Internet Explorer 8, Firefox 3, Opera 9, and Safari nightly. Facebook is already using this feature, for example, in order to support web-based instant messaging.

Austin Chau put together a nice simple demo and blog post showing how easy it is to use this new feature:

The demo demonstrates how easy it is for two iframes of different origins to talk to each other. In real time, each iframe is passing its own mouse coordinates from the onmousemove event to each other…The basic semantic is to use postMessage() to send data to a window object and the receiving window should register for the “onmessage” event to receive data.

In the demo Austin creates two iframes that communicate using postMessage in order to broadcast the mouse’s coordinates:

javascript
< view plain text >
  1. window.document.onmousemove = function(e) {  
  2.   var x = (window.Event) ? e.pageX : window.event.clientX;  
  3.   var y = (window.Event) ? e.pageY : window.event.clientY;  
  4.      
  5.   // this send data to the second iframe of the current page  
  6.   window.parent.frames[1].postMessage('x = ' + x + ' y = ' + y, '*');        
  7. };  
  8.    
  9. var onmessage = function(e) {  
  10.   var data = e.data;  
  11.   var origin = e.origin;  
  12.   document.getElementById('display').innerHTML = data;  
  13. };  
  14.      
  15. if (typeof window.addEventListener != 'undefined') {  
  16.   window.addEventListener('message', onmessage, false);  
  17. } else if (typeof window.attachEvent != 'undefined') {  
  18.   window.attachEvent('onmessage', onmessage);  
  19. }

Austin found that he has to use addEventListener instead of doing inline event handlers for things to work correctly:

One thing to beware of is that for some reason it would not receive data properly if you use the traditional event listener setup, you have to use addEventListener()

See the source code and the full blog post.

Are you planning to use postMessage in your own projects? If so, how?

[Disclosure: I work with Austin at Google on the Open Web Advocacy team]

Related Content:

Posted by Brad Neuberg at 7:30 am
5 Comments

+++--
3.3 rating from 14 votes

5 Comments »

Comments feed TrackBack URI

Whow ! Really interesting !!
I currently try to realize a communication “tunnel” between webpage and firefox addon using DOM event.
It works but really limited. This concept show me a new way to investigate…

ludoo

Comment by ludoo — November 18, 2008

Same subject reviewed by J. Resig : http://ejohn.org/blog/postmessage-api-changes/

Comment by ludoo — November 18, 2008

A little while ago I created a JS library that uses postMessage and tries fall backs when it is not available (Cookies, Google Gears).
http://code.google.com/p/xssinterface/

Unfortunately it is in dire need of a new release (coming this weekend, trunk is fixed) because APIs happy changed between browser releases (deciding back and forth wehther postMessage should belong to document or window).

Comment by Malde — November 18, 2008

@Malde: I’ve seen your library. Nice work, though I think you should change the name :) BTW, email me at bradneuberg ATATAT g o o g l e . c o m since there might be a breaking change to the Gears cross origin work that might affect your library.

Comment by Brad Neuberg — November 18, 2008

I’m using postMessage as the basis for a inter-window cross-domain RPC implementation. The library is available at Google Code: http://code.google.com/p/pmrpc/ and is being used in a few cool projects.

Comment by izuzak — November 18, 2008

Leave a comment

You must be logged in to post a comment.