首頁 > 文章 > web前端 > 詳解HTML5中的訊息通訊程式碼

詳解HTML5中的訊息通訊程式碼

零下一度原創: 2017-04-22 14:38:511786瀏覽

HTML5支援跨文件訊息通訊(Cross-Document Messaging)。

既然使用到訊息通信，那麼必然有事件(event)產生。根據事件的產生和消費，我們能夠找到發送者和接收者，也就是Sender和Listener。

其中Litener需要做如下的工作：

寫一個訊息處理函數；
將訊息處理函數註冊： addEventListener('message', function, false);

其中Sender需要做以下工作：

postMessage('this is a message' , 'http://www.php.cn');

事件物件event中包含的成員包括：

data：傳遞的資料；
origin：origin，origin包括三個要素：主機、協定、連接埠；
source：來源物件；

好了，下面我們看一個例子，這個例子展示了在頁面中嵌套頁面並且向子頁面發送訊息：

父頁面如下：

<!DOCTYPE html>
<html lang="en">

<!-- 
    crossDomain.html by Bill Weinman 
    <http://bw.org/contact/>
    created 2011-04-16

    Copyright (c) 2011 The BearHeart Group, LLC
    This file may be used for personal educational purposes as needed. 
    Use for other purposes is granted provided that this notice is
    retained and any changes made are clearly indicated as such. 
-->

<head>
    <title>
        HTML5 Messaging Template File (One)
    </title>
    <link rel="stylesheet" type="text/css" href="../CSS/main.css">
    <style>
        #frameTwo {
            float: left;
            width: 500px;
            height: 400px;
            margin: 0 5px;
            padding: 3px;
            border-top: 2px solid #3c6b92;
            border-left: 2px solid #3c6b92;
            border-bottom: 2px solid #ccc;
            border-right: 2px solid #ccc;
        }
        #content { height: 500px; }
    </style>
    <script type="text/javascript">
		// 域名
        var originTwo = &#39;http://two.3sn.net&#39;;
		// URL地址
        var URLTwo = &#39;http://two.3sn.net/H5Msg/ExerciseFiles/Chap01/crossDomainTwo.html&#39;;
        var windowTwo = null;

        function handleMessage(event) {
			// 判断源区域
            if (event.origin == originTwo) {
                if(!windowTwo) windowTwo = event.source;
                log(&#39;message from origin: &#39; + event.origin);
                log(event.data);
				// 发送消息
                windowTwo.postMessage(&#39;this is from windowOne!&#39;, originTwo);
                log(&#39;message sent back to windowTwo&#39;);
            } else {
                dispError(&#39;message from untrusted origin: &#39; + event.origin);
            }
        }


        function init() {
			// 添加消息处理函数
		    window.addEventListener("message", handleMessage, false);
            window.onerror = windowErrorHandler;
            log(&#39;this is windowOne&#39;);
            log(&#39;host: &#39; + location.host);
			
			// load two页面
            element(&#39;frameTwo&#39;).src = URLTwo;   // load the frame
        }

        // ##### Utilities #####

        // shortcut for getElementById
        function element(id) { return document.getElementById(id); }

        function clearDisp() {
            element(&#39;pageResults&#39;).innerHTML = &#39;&#39;;
            element(&#39;message&#39;).innerHTML = &#39;&#39;;
            element(&#39;message&#39;).className = &#39;&#39;;
        }

        function dispMessage(message) {
            m = element(&#39;message&#39;);
            m.className = &#39;message&#39;;
            if(m.textContent.length > 0) {
                m.innerHTML += &#39;<br />&#39; + message;
            } else m.innerHTML = message;
        }

        function windowErrorHandler(message, filename, lineno) {
            dispError(message + &#39; (&#39; + filename + &#39;:&#39; + lineno + &#39;)&#39; );
            return true;
        };

        function dispError(errorMessage) {
            element(&#39;pageResults&#39;).innerHTML += 
                errorMessage ? &#39;<p class="error">&#39; + errorMessage + &#39;</p>\n&#39; : &#39;&#39;;
        }

        function log(m) {
            if(m.length < 1) return;
            logElement = element(&#39;log&#39;);
            if(logElement.textContent.length > 0) logElement.innerHTML += &#39;<br />&#39;;
            logElement.innerHTML += nowTimeString() + &#39; &#39; + m;
        }

        function nowTimeString() {
            var d = new Date();
            return numToString(d.getUTCHours(), 2) + &#39;:&#39; + numToString(d.getUTCMinutes(), 2) + &#39;:&#39; +
                numToString(d.getUTCSeconds(), 2) + &#39;.&#39; + numToString(d.getUTCMilliseconds(), 3);
        }

        function numToString( num, len ) {
            var num = num + &#39;&#39;;
            while(num.length < len) num = &#39;0&#39; + num;
            return num;
        }

        window.onload = init;

    </script>
</head>

<body>

<p id="content">

    <h1> 
        HTML5 Messaging Template File (One)
    </h1>

    <p id="message"></p>
    <p id="pageResults"></p>

    <iframe id="frameTwo">
        <p>Your browser doesn&#39;t support the iFrame feature</p>
    </iframe>

    <p id="log" style="font-family: monospace"></p>

</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<!-- 
    crossDomain.html by Bill Weinman 
    <http://bw.org/contact/>
    created 2011-04-16

    Copyright (c) 2011 The BearHeart Group, LLC
    This file may be used for personal educational purposes as needed. 
    Use for other purposes is granted provided that this notice is
    retained and any changes made are clearly indicated as such. 
-->

<head>
    <title>
        HTML5 Messaging Template File (Two)
    </title>
    <link rel="stylesheet" type="text/css" href="../CSS/main.css">
    <script type="text/javascript">
        var originOne = &#39;http://one.3sn.net&#39;;

        function handleMessage(event) {
            if (event.origin == originOne) {
                log(&#39;message from origin: &#39; + event.origin);
                log(event.data);
            } else {
                dispError(&#39;message from untrusted origin: &#39; + event.origin);
            }
        }

        // ##### Init #####

        function init() {
            window.onerror = windowErrorHandler;    // addEventListener doesn&#39;t provide the right error object in Firefox
            window.addEventListener("message", handleMessage, false);
            log(&#39;this is windowTwo&#39;);
            log(&#39;host: &#39; + location.host);
            var windowOne = parent;
            windowOne.postMessage(&#39;this is from windowTwo!&#39;, originOne);
            log(&#39;message sent to windowOne&#39;);
        }

        // ##### Utilities #####

        // shortcut for getElementById
        function element(id) { return document.getElementById(id); }

        function clearDisp() {
            element(&#39;pageResults&#39;).innerHTML = &#39;&#39;;
            element(&#39;message&#39;).innerHTML = &#39;&#39;;
            element(&#39;message&#39;).className = &#39;&#39;;
        }

        function dispMessage(message) {
            m = element(&#39;message&#39;);
            m.className = &#39;message&#39;;
            if(m.textContent.length > 0) {
                m.innerHTML += &#39;<br />&#39; + message;
            } else m.innerHTML = message;
        }

        function windowErrorHandler(message, filename, lineno) {
            dispError(message + &#39; (&#39; + filename + &#39;:&#39; + lineno + &#39;)&#39; );
            return true;
        };

        function dispError(errorMessage) {
            element(&#39;pageResults&#39;).innerHTML += 
                errorMessage ? &#39;<p class="error">&#39; + errorMessage + &#39;</p>\n&#39; : &#39;&#39;;
        }

        function log(m) {
            if(m.length < 1) return;
            logElement = element(&#39;log&#39;);
            if(logElement.textContent.length > 0) logElement.innerHTML += &#39;<br />&#39;;
            logElement.innerHTML += nowTimeString() + &#39; &#39; + m;
        }

        function nowTimeString() {
            var d = new Date();
            return numToString(d.getUTCHours(), 2) + &#39;:&#39; + numToString(d.getUTCMinutes(), 2) + &#39;:&#39; +
                numToString(d.getUTCSeconds(), 2) + &#39;.&#39; + numToString(d.getUTCMilliseconds(), 3);
        }

        function numToString( num, len ) {
            var num = num + &#39;&#39;;
            while(num.length < len) num = &#39;0&#39; + num;
            return num;
        }

        window.onload = init;

    </script>
</head>

<body>

<p id="content">

    <h1> 
        HTML5 Messaging Template File (Two)
    </h1>

    <p id="message"></p>
    <p id="pageResults"></p>
    <p id="log" style="font-family: monospace"></p>

</p>
</body>
</html>

需要學習html5的同學請關注php中文網html5影片教學，眾多html5線上影片教學可以免費觀看！

以上是詳解HTML5中的訊息通訊程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：用HTML5實作桌面提醒功能的一個實例程式碼下一篇：用HTML5實作桌面提醒功能的一個實例程式碼

看更多