ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5のメッセージ通信コードの詳細説明
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 = '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 を学習する必要がある学生は、php 中国語 Web サイトに注意してください
html5 ビデオ チュートリアル以上がHTML5のメッセージ通信コードの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。