html5跨域通讯之postMessage的用法

浏览数：19 / 时间：2015年06月09日

<!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>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

html5跨域通讯之postMessage的用法