html5跨域通讯之postMessage的用法

最新推荐文章于 2021-06-09 13:56:21 发布

weixin_38166852

最新推荐文章于 2021-06-09 13:56:21 发布

阅读量134

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wshiqtb/p/3171199.html

本文介绍了一种实现跨域通讯的技术，通过POSTMESSAGE机制在不同源的页面间传递信息，包括如何设置目标源、默认标题、通知定时器及控制标题闪烁。同时展示了两个示例页面的代码实现。

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>