Peter Lubbers - Pro HTML 5 Programming

124
CHAPTER 5 ■ USING THE COMMUNICATION APIS
Cross-Origin Portal
Origin: http://portal.example.com:9999
Status
Change Status
This uses postMessage to send a status update to the widget iframe contained in the portal
page.
Stop Blinking Title
Listing 5-4 shows the code for the portal page postMessageWidget.html.
Listing 5-4. Contents of postMessageWidget.html
widget
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
}
}
function sendString(s) {
window.top.postMessage(s, targetOrigin);
}
function loadDemo() {
document.getElementById("actionButton").addEventListener("click",
function() {
var messageText = document.getElementById("messageText").value;
sendString(messageText);
}, true);
}
window.addEventListener("load", loadDemo, true);
window.addEventListener("message", messageHandler, true);
Widget iframe
Origin: http://chat.example.net:9999
Status set to: by containing portal.