Peter Lubbers - Pro HTML 5 Programming

Download from Wow! eBook
122
CHAPTER 5 ■ USING THE COMMUNICATION APIS
Next, add a function to communicate with the chat widget. It uses postMessage to send a status
update to the widget iframe contained in the portal page. In a live chat application, it could be used to
communicate the user’s status (available, away, and so on).
function sendString(s) {
document.getElementById("widget").contentWindow.postMessage(s, targetOrigin);
}
Building the Chat Widget Page
First, add an event listener messageHandler to listen for message events coming from the portal page. As
shown in the following example code, the chat widget listens for incoming status-change messages. To
make sure the message comes from the portal page, the message’s origin is verified; if it does not come
from http://portal.example.com:9999, the widget simply ignores it.
var targetOrigin = "http://portal.example.com:9999";
function messageHandler(e) {
if (e.origin === "http://portal.example.com:9999") {
document.getElementById("status").textContent = e.data;
} else {
// ignore messages from other origins
}
}
Next, add a function to communicate with the portal page. The widget will ask the portal to notify
the user on its behalf and uses postMessage to send a message to the portal page when a new chat
message is received, as shown in the following example:
function sendString(s) {
window.top.postMessage(s, targetOrigin);
}
The Final Code
Listing 5-3 shows the complete code for the Portal page postMessagePortal.html.
Listing 5-3. Contents of postMessagePortal.html
Portal [http://portal.example.com:9999]
iframe {
height: 400px;
width: 800px;
}