html5 实时通讯,html5跨域通讯之postMessage的用法总结

postMessagePortal.html 页面代码

复制代码代码如下:

var targetOrigin = "http://22527.vhost20.boxcdn.cn";

var defaultTitle = "Portal";

var notificationTimer = null;

function messageHandler(e) {

if (e.origin == targetOrigin) {

notify(e.data);

} else {

// ignore messages from other origins

}

}

function sendString(s) {

document.getElementById("widget").contentWindow.postMessage(s, targetOrigin);

}

function notify(message) {

stopBlinking();

blinkTitle(message, defaultTitle);

}

function stopBlinking() {

if (notificationTimer !== null) {

clearTimeout(notificationTimer);

}

document.title = defaultTitle;

}

function blinkTitle(m1, m2) {

document.title = m1;

notificationTimer = setTimeout(blinkTitle, 1000, m2, m1)

}

function sendStatus() {

var statusText = document.getElementById("statusText").value;

sendString(statusText);

}

function loadDemo() {

document.getElementById("sendButton").addEventListener("click", sendStatus, true);

document.getElementById("stopButton").addEventListener("click", stopBlinking, true);

sendStatus();

}

window.addEventListener("load", loadDemo, true);

window.addEventListener("message", messageHandler, true);

跨域通讯

传递信息：

确定

停止标题闪烁

postMessageWidget.html页面的代码

复制代码代码如下:

var targetOrigin = "http://www.weixiu0376.cn";

// TODO whitelist array

function messageHandler(e) {

if (e.origin === "http://www.weixiu0376.cn") {

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);

显示接收信息: