Maison > Article > interface Web > Explication détaillée du code de communication du message en HTML5
HTML5 prend en charge la messagerie inter-documents (Cross-Document Messaging).
Puisque la communication par message est utilisée, des événements doivent se produire. Selon la génération et la consommation des événements, nous pouvons trouver l'expéditeur et le destinataire, c'est-à-dire l'expéditeur et l'auditeur.
Litener doit effectuer le travail suivant :
Écrire une fonction de traitement de message
Enregistrer la fonction de traitement de message : addEventListener('message', function, false);
L'expéditeur doit effectuer les opérations suivantes :
postMessage('ceci est un message ' , 'http://www.php.cn');
Les membres contenus dans l'événement objet événement incluent :
données : données transmises ;
origine : origine, l'origine comprend trois éléments : hôte, protocole, port
source : objet 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 = '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>Étudiants qui ont besoin d'apprendre le html5, veuillez faire attention au site Web php chinois
Tutoriel vidéo html5 De nombreux didacticiels vidéo html5 en ligne peuvent être visionnés gratuitement !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!