Heim > Artikel > Web-Frontend > Detaillierte Erläuterung des Nachrichtenkommunikationscodes in HTML5

Detaillierte Erläuterung des Nachrichtenkommunikationscodes in HTML5

零下一度Original: 2017-04-22 14:38:511786Durchsuche

HTML5 unterstützt dokumentübergreifendes Messaging (Cross-Document Messaging).

Da Nachrichtenkommunikation verwendet wird, müssen Ereignisse auftreten. Entsprechend der Generierung und dem Verbrauch von Ereignissen können wir den Sender und den Empfänger ermitteln, dh den Sender und den Zuhörer.

Litener muss die folgenden Arbeiten ausführen:

Eine Nachrichtenverarbeitungsfunktion schreiben
Die Nachrichtenverarbeitungsfunktion registrieren: addEventListener('message', function, false);

Der Absender muss Folgendes tun:

postMessage('das ist eine Nachricht ' , 'http://www.php.cn');

Die im Ereignisobjekt event enthaltenen Mitglieder umfassen:

Daten : übergebene Daten;
Ursprung: Ursprung, Ursprung enthält drei Elemente: Host, Protokoll, Port;
Quelle: Quellobjekt; >

Okay, schauen wir uns unten ein Beispiel an. Dieses Beispiel zeigt das Verschachteln von Seiten innerhalb von Seiten und das Senden von Nachrichten an Unterseiten:

Die übergeordnete Seite sieht wie folgt aus:

<!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>

Studenten, die HTML5 lernen müssen, achten bitte auf die chinesische PHP-Website

HTML5-Video-Tutorial Viele HTML5-Online-Video-Tutorials können kostenlos angesehen werden!

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Nachrichtenkommunikationscodes in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ein Beispielcode für die Implementierung der Desktop-Erinnerungsfunktion mit HTML5Nächster Artikel：Ein Beispielcode für die Implementierung der Desktop-Erinnerungsfunktion mit HTML5

In Verbindung stehende Artikel

Mehr sehen