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>

 

 

你可能感兴趣的:(message)