HTML5 postMessage 訊息傳輸與 POST 跨域通訊
HTML5 的 postMessage 方法可實現不同窗體間互相通訊。
postMessage 支援實現跨文件訊息傳輸（Cross Document Messaging），並且可跨域傳輸資訊。Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4 以上版本瀏覽器都已支援 postMessage。
1. postMessage 功能簡介
postMessage 主要包含兩個 API：
1).訊息監聽：onmessage
2).訊息傳送：postMessage
使用步驟也很簡單：
1.1.監聽傳送過來的訊息
1 |
window.addEventListener('message',
onMessage, false); |
2 |
3 |
var onMessage
= function(){ |
4 |
console.log(e,
e.data); |
6 |
return false; |
7 |
} |
8 |
//
訊息處理... |
9 |
} |
注意：
e.data 即接收到的資訊。
由於該監聽可接收任意傳送過來的訊息，故一般應對 e.origin 來源進行檢測，如果不是預設的訊息來源，應予以拒絕處理。
1.2.向其他窗體傳送訊息
首先獲取要傳送訊息的窗體物件（如iframe），然後向該物件傳送資訊
1 |
var iframeWin
= document.getElementsByTagName('iframe')[0].contentWindow; |
2 |
iframeWin.postMessage('hello
world!', "*"); |
注意：
postMessage 包含兩個引數，第一個引數為傳送的訊息內容，為字串型別。第二個為來源域限制。即限制接收窗體的 URL。
進行跨文件訊息傳送，首先要獲取傳送物件窗體。所以 postMessage 常用在從當前頁建立/開啟新窗體或新的 worker 執行緒中，實現雙方通訊。請與志文工作室一起來看如下使用示例。
2. worker 多執行緒
訊息接收處理頁面：
01 |
<!DOCTYPE
html> |