Peter Lubbers - Pro HTML 5 Programming

120
CHAPTER 5 ■ USING THE COMMUNICATION APIS
function messageHandler(e) {
if(checkWhiteList(e.origin)) {
processMessage(e.data);
} else {
// ignore messages from unrecognized origins
}
}
window.addEventListener(“message”, messageHandler, true);
■ Note The MessageEvent interface defined by HTML5 is also part of HTML5 WebSockets and HTML5 Web
Workers. The communication features of HTML5 have consistent APIs for receiving messages. Other
communication APIs, such as the EventSource API and Web Workers, also use MessageEvent to deliver messages.
Building an Application Using the postMessage API
Let’s say that you wanted to build the aforementioned portal application with its cross-origin chat
widget. You can use Cross Document Messaging to communicate between the portal page and the chat
widget, as shown in Figure 5-3.
Figure 5-3. Portal page with cross-origin chat widget iframe