zoukankan html css js c++ java

html5跨域通讯之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>

查看全文

相关阅读:
独角戏
 开源引擎
 如何实现一个UI系统
 VC编程规范—程序员应该这样写代码
 夕阳下的熊猫香[转]
在桌面上显示屏保
 在WinSock上使用IOCP
结构体对齐的具体含义（#pragma pack）
一个程序员的奋斗
 让汇编揭开死循环的神秘面纱

原文地址：https://www.cnblogs.com/wshiqtb/p/3171199.html