站長資訊網HTML5支持跨文檔消息通信(Cross-Document Messaging)。
既然使用到消息通信，那么必然有事件(event)產生。根據事件的產生和消費，我們能夠找到發送者和接收者，也就是Sender和Listener。
其中Litener需要做如下的工作：
-
編寫一個消息處理函數；
-
將消息處理函數注冊：addEventListener('message', function, false);
其中Sender需要做以下工作：
-
postMessage('this is a message', 'http://www.php.cn');
事件對象event中包含的成員包括：
-
data：傳遞的數據；
-
origin：origin，origin包括三要素：主機、協議、端口；
-
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>
需要學習html5的同學請關注php中文網html5視頻教程，眾多html5在線視頻教程可以免費觀看！
