ホームページ > 記事 > ウェブフロントエンド > HTML5のメッセージ通信コードの詳細説明

HTML5のメッセージ通信コードの詳細説明

零下一度オリジナル: 2017-04-22 14:38:511785ブラウズ

HTML5 はクロスドキュメントメッセージング (クロスドキュメントメッセージング) をサポートしています。

メッセージ通信を使用するため、イベントが発生する必要があります。イベントの生成と消費に従って、送信者と受信者、つまり Sender と Listener を見つけることができます。

ライトナーは次の作業を行う必要があります:

メッセージ処理関数を作成します。
メッセージ処理関数を登録します: addEventListener('message', function, false);

送信者は次のことを行う必要があります。次の作業を実行します。 Working:

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

イベントオブジェクトのイベントに含まれるメンバーには次のものが含まれます:

data : 渡されたデータ ;
origin: オリジン、オリジンには、ホスト、プロトコル、ポートの 3 つの要素が含まれています。ページにオブジェクトを埋め込み、子ページにメッセージを送信します:

<!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 中国語 Web サイトに注意してください

html5 ビデオチュートリアル

以上がHTML5のメッセージ通信コードの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML5を使用したデスクトップリマインダー機能の実装コード例次の記事：HTML5を使用したデスクトップリマインダー機能の実装コード例

続きを見る