html5跨域通讯之postMessage的用法总结_html5教程技巧

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

显示接收信息:

发送消息