復制代碼代碼如下: !DOCTYPE html title 標題 /title link rel="stylesheet" href="styles.css" link rel="icon" script /p p var targetOrigin = "http://22527.vhost20.boxcdn.cn"; /p p var defaultTitle = "Portal"; var notificationTimer = null; /p p function messageHandler(e) { if (e.origin == targetOrigin) { notify(e.data); } else { // ignore messages from other origins } } /p p function sendString(s) { document.getElementById("widget").contentWindow.postMessage(s, targetOrigin); } /p p function notify(message) { stopBlinking(); blinkTitle(message, defaultTitle); } /p p function stopBlinking() { if (notificationTimer !== null) { clearTimeout(notificationTimer); } document.title = defaultTitle; } /p p function blinkTitle(m1, m2) { document.title = m1; notificationTimer = setTimeout(blinkTitle, 1000, m2, m1) } /p p function sendStatus() { var statusText = document.getElementById("statusText").value; sendString(statusText); } /p p 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 p /script /p p h1 跨域通訊 /h1 傳遞信息： input type="text" id="statusText" value="Online" button id="sendButton" 確定 /button
iframe id="widget" src="http://22527.vhost20.boxcdn.cn/postMessageWidget.html" /iframe p button id="stopButton" 停止標題閃爍 /button /p
postMessageWidget.html頁面的代碼
復制代碼代碼如下: !DOCTYPE html title 標題 /title link rel="stylesheet" href="styles.css" script /p p var targetOrigin = "http://www.weixiu0376.cn"; /p p // TODO whitelist array /p p function messageHandler(e) { if (e.origin === "http://www.weixiu0376.cn") { document.getElementById("status").textContent = e.data; } else { // ignore messages from other origins } } /p p function sendString(s) { window.top.postMessage(s, targetOrigin); } /p p function loadDemo() { document.getElementById("actionButton").addEventListener("click", function() { var messageText = document.getElementById("messageText").value; sendString(messageText); }, true); /p p } window.addEventListener("load", loadDemo, true); window.addEventListener("message", messageHandler, true); /p p /script p 顯示接收信息: strong id="status" /strong p div input type="text" id="messageText" value="填寫消息內容" button id="actionButton" 發送消息 /button /div html教程
