Rumah > Artikel > hujung hadapan web > Ringkasan penggunaan postMessage dalam kemahiran tutorial html5 cross-domain communication_html5
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 {
// abaikan mesej dari asal lain
}
}
fungsi sendString(s) {
document.getElementById("widget").contentWindow.postMessage(s, targetOrigin);
}
fungsi notify(message) {
stopBlinking();
blinkTitle(message, defaultTitle);
}
fungsi stopBlinking() {
if (notificationTimer !== null) {
clearTimeout(notificationTimer);
}
document.title = defaultTitle;
}
fungsi sendStatus() {
var statusText = document.getElementById("statusText").value;
sendString(statusText);
}
function loadDemo() {
document.getElementById("sendButton").addEventListener("click", sendStatus, true);
var targetOrigin = "http://www.weixiu0376.cn";
// TODO tatasusunan senarai putih
function messageHandler(e) {
if (e.origin === "http://www.weixiu0376.cn") {
document.getElementById("status").textContent = e. data;
} lain {
// abaikan mesej dari asal lain
}
}
fungsi sendString {
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);
显示接收信息: