html5跨域通訊之postMessage的用法

本文轉載自查看原文 2013-07-04 11:12 10039 前端技術

postMessagePortal.html 頁面代碼

<!DOCTYPE html>
<title>標題</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="http://apress.com/favicon.ico">
<script>

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

</script>

<h1>跨域通訊</h1>
傳遞信息：<input type="text" id="statusText" value="Online">
<button id="sendButton">確定</button>
<br>
<br>
<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>

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

</script>
<p>顯示接收信息: <strong id="status"></strong><p>
<div>
    <input type="text" id="messageText" value="填寫消息內容">
    <button id="actionButton">發送消息</button>
</div>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 HTML5 之跨域通訊（postMessage） HTML5 postMessage 跨域交換數據跨域解決方案之HTML5 postMessage Html5 postMessage實現跨域消息傳遞 html5 postMessage解決跨域、跨窗口消息傳遞 [轉]html5: postMessage解決跨域和跨頁面通信的問題 html5 postMessage解決跨域、跨窗口消息傳遞 html5 postMessage解決跨域、跨窗口消息傳遞 html5 postMessage 實現類似 sendMessage 的同步效果，支持跨域使用HTML5中postMessage 實現ajax中的POST跨域問題