Rumah  >  Artikel  >  hujung hadapan web  >  Ringkasan penggunaan postMessage dalam kemahiran tutorial html5 cross-domain communication_html5

Ringkasan penggunaan postMessage dalam kemahiran tutorial html5 cross-domain communication_html5

WBOY
WBOYasal
2016-05-16 15:48:451662semak imbas

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 blinkTitle(m1, m2) {
document.title = m1;
notificationTimer = setTimeout(blinkTitle, 1000, m2, m1)
}

fungsi 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);< /p>

跨域通讯


传递信息:
确定