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:

  • Pitfalls of HTML5 clients
    Using an HTML5 client to access a virtual desktop isn't for everyone. Workers who need high-resolution graphics or use Web apps that require local...
  • HTML5 guide
    HTML5 guide: The advent of HTML5 signals a new wave of Web programming methods, and a new slate of standards for enterprise application...
  • Making the case for HTML5 clients
    HTML5 clients have improved significantly since their inception. With better protocols and GPU acceleration, device-agnostic HTML5 is a good option...
  • Understanding the HTML5 standard
    Vendors are implementing HTML5 to take advantage of improved compatibility despite the fact that the standard won't be final until late...
  • Mobile HTML5 remains relevant, but faces challenges
    Enterprise architects need to add mobile HTML5 to their repertoire if it isn't already there, as more organizations aim to leverage the...

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.