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; >
<!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 = 'http://two.3sn.net'; // URL地址 var URLTwo = 'http://two.3sn.net/H5Msg/ExerciseFiles/Chap01/crossDomainTwo.html'; var windowTwo = null; function handleMessage(event) { // 判断源区域 if (event.origin == originTwo) { if(!windowTwo) windowTwo = event.source; log('message from origin: ' + event.origin); log(event.data); // 发送消息 windowTwo.postMessage('this is from windowOne!', originTwo); log('message sent back to windowTwo'); } else { dispError('message from untrusted origin: ' + event.origin); } } function init() { // 添加消息处理函数 window.addEventListener("message", handleMessage, false); window.onerror = windowErrorHandler; log('this is windowOne'); log('host: ' + location.host); // load two页面 element('frameTwo').src = URLTwo; // load the frame } // ##### Utilities ##### // shortcut for getElementById function element(id) { return document.getElementById(id); } function clearDisp() { element('pageResults').innerHTML = ''; element('message').innerHTML = ''; element('message').className = ''; } function dispMessage(message) { m = element('message'); m.className = 'message'; if(m.textContent.length > 0) { m.innerHTML += '<br />' + message; } else m.innerHTML = message; } function windowErrorHandler(message, filename, lineno) { dispError(message + ' (' + filename + ':' + lineno + ')' ); return true; }; function dispError(errorMessage) { element('pageResults').innerHTML += errorMessage ? '<p class="error">' + errorMessage + '</p>\n' : ''; } function log(m) { if(m.length < 1) return; logElement = element('log'); if(logElement.textContent.length > 0) logElement.innerHTML += '<br />'; logElement.innerHTML += nowTimeString() + ' ' + m; } function nowTimeString() { var d = new Date(); return numToString(d.getUTCHours(), 2) + ':' + numToString(d.getUTCMinutes(), 2) + ':' + numToString(d.getUTCSeconds(), 2) + '.' + numToString(d.getUTCMilliseconds(), 3); } function numToString( num, len ) { var num = num + ''; while(num.length < len) num = '0' + 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'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 = 'http://one.3sn.net'; function handleMessage(event) { if (event.origin == originOne) { log('message from origin: ' + event.origin); log(event.data); } else { dispError('message from untrusted origin: ' + event.origin); } } // ##### Init ##### function init() { window.onerror = windowErrorHandler; // addEventListener doesn't provide the right error object in Firefox window.addEventListener("message", handleMessage, false); log('this is windowTwo'); log('host: ' + location.host); var windowOne = parent; windowOne.postMessage('this is from windowTwo!', originOne); log('message sent to windowOne'); } // ##### Utilities ##### // shortcut for getElementById function element(id) { return document.getElementById(id); } function clearDisp() { element('pageResults').innerHTML = ''; element('message').innerHTML = ''; element('message').className = ''; } function dispMessage(message) { m = element('message'); m.className = 'message'; if(m.textContent.length > 0) { m.innerHTML += '<br />' + message; } else m.innerHTML = message; } function windowErrorHandler(message, filename, lineno) { dispError(message + ' (' + filename + ':' + lineno + ')' ); return true; }; function dispError(errorMessage) { element('pageResults').innerHTML += errorMessage ? '<p class="error">' + errorMessage + '</p>\n' : ''; } function log(m) { if(m.length < 1) return; logElement = element('log'); if(logElement.textContent.length > 0) logElement.innerHTML += '<br />'; logElement.innerHTML += nowTimeString() + ' ' + m; } function nowTimeString() { var d = new Date(); return numToString(d.getUTCHours(), 2) + ':' + numToString(d.getUTCMinutes(), 2) + ':' + numToString(d.getUTCSeconds(), 2) + '.' + numToString(d.getUTCMilliseconds(), 3); } function numToString( num, len ) { var num = num + ''; while(num.length < len) num = '0' + 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-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!