Peter Lubbers - Pro HTML 5 Programming

116
CHAPTER 5 ■ USING THE COMMUNICATION APIS
To receive messages, you just have to add an event handler to your page. When a message arrives,
you can check its origin and decide whether or not to do something with the message. Listing 5-1 shows
an event listener that passes the message to a messageHandler function.
Listing 5-1. An event listener for message events
window.addEventListener(“message”, messageHandler, true);
function messageHandler(e) {
switch(e.origin) {
case “friend.example.com”:
// process message
processMessage(e.data);
break;
default:
// message origin not recognized
// ignoring message
}
}
A message event is a DOM event with data and origin properties. The data property is the actual
message that the sender passed along and the origin property is the sender’s origin. Using the origin
property, it is easy for the receiving side to ignore messages from untrusted sources; the origin can
simply be checked against a list of allowed origins.
As shown in Figure 5-1, the postMessage API provides a way to communicate between a chat widget
iframe hosted at http://chat.example.net and an HTML page that contains the chat widget iframe
hosted at http://portal.example.com (two different origins).
Figure 5-1. postMessage communication between an iframe and a main HTML page