在前端開發中，Web 應用通常需要在不同視窗、不同 iframe 之間進行通訊。而 postMessage 是一種安全的跨文件通訊方法，用於在兩個不同的瀏覽上下文（如不同的視窗、iframe，甚至是不同的標籤頁）之間傳送訊息。本文將詳細介紹 postMessage 的使用方法及其應用場景。
一、什麼是 postMessage
postMessage 是 HTML5 引入的一種 API，屬於 Web Messaging 標準的一部分。它允許來自不同源的文件進行非同步通訊。相比於傳統的跨域通訊方法（如 JSONP），postMessage 更加靈活和安全。
二、基本用法
1. 傳送訊息
在使用 postMessage 時，首先需要確定要傳送訊息的目標視窗。可以透過 window.open 開啟的視窗物件，或者透過 document.getElementById 獲取的 iframe 元素的 contentWindow 屬性來獲取目標視窗。
// 獲取目標視窗物件
var targetWindow = document.getElementById('myIframe').contentWindow;
// 傳送訊息
targetWindow.postMessage('Hello from parent!', 'https://example.com');
在上述程式碼中，'https://example.com' 是目標視窗的源，確保訊息只會傳送到來自這個源的視窗。
2. 接收訊息
接收訊息的一方需要監聽 message 事件，透過 event.data 來獲取傳送過來的資料。
window.addEventListener('message', function(event) {
// 檢查訊息來源
if (event.origin === 'https://example.com') {
console.log('Received message:', event.data);
}
}, false);
三、引數詳解
postMessage 方法接受兩個主要引數：
message: 傳送的訊息內容，可以是字串、物件等。
targetOrigin: 指定訊息接收方的源，必須是字串形式，包括協議、域名和埠號。如果指定為
'*'，表示不限制目標視窗的源。
四、應用場景
1. 跨域通訊
postMessage 最常見的應用場景就是跨域通訊。例如，一個頁面嵌入了來自不同源的 iframe，這時就可以透過 postMessage 實現安全的通訊。
<iframe id="myIframe" src="https://example.com"></iframe>
<script>
var iframe = document.getElementById('myIframe').contentWindow;
// 向 iframe 傳送訊息
iframe.postMessage('Hello from parent!', 'https://example.com');
window.addEventListener('message', function(event) {
if (event.origin === 'https://example.com') {
console.log('Received message from iframe:', event.data);
}
}, false);
</script>
2. 與服務工作執行緒 (Service Workers) 通訊
postMessage 也可以用於頁面與 Service Worker 之間的通訊。Service Worker 是一種 Web Worker，可以在後臺獨立於網頁執行，用於實現離線快取、推送通知等功能。
// 頁面傳送訊息給 Service Worker
navigator.serviceWorker.controller.postMessage('Hello from page!');
// Service Worker 接收訊息
self.addEventListener('message', function(event) {
console.log('Received message in Service Worker:', event.data);
});
3. 多視窗通訊
在複雜的 Web 應用中，可能需要多個視窗之間進行通訊。例如，一個應用開啟了多個標籤頁，每個標籤頁需要實時同步資料。
// 在一個標籤頁傳送訊息
window.open('https://example.com');
window.postMessage('Sync data', 'https://example.com');
// 在另一個標籤頁接收訊息
window.addEventListener('message', function(event) {
if (event.origin === 'https://example.com') {
console.log('Received sync data:', event.data);
}
}, false);
五、安全性考慮
雖然 postMessage 提供了方便的跨域通訊方法，但在使用過程中必須考慮安全性問題，防止跨站指令碼攻擊（XSS）。
1. 檢查訊息來源
始終檢查訊息的來源（event.origin）是否可信，以確保只接受來自可信源的訊息。
window.addEventListener('message', function(event) {
if (event.origin !== 'https://trusted-origin.com') {
return; // 忽略不可信的訊息
}
// 處理可信的訊息
console.log('Received trusted message:', event.data);
}, false);
2. 驗證訊息內容
除了檢查訊息來源，還應對訊息內容進行驗證，確保訊息資料格式正確且安全。
window.addEventListener('message', function(event) {
if (event.origin === 'https://trusted-origin.com') {
try {
var messageData = JSON.parse(event.data);
// 處理驗證後的訊息資料
} catch (e) {
console.error('Invalid message data format');
}
}
}, false);
六、瀏覽器相容性
postMessage 是 HTML5 標準的一部分，目前幾乎所有現代瀏覽器（包括移動端瀏覽器）都支援這個 API。因此，在實際開發中，可以放心使用 postMessage 實現跨文件通訊。
七、實際案例分析
案例一：支付視窗與主站通訊
在電商網站中，使用者支付通常會跳轉到第三方支付平臺。這時需要在支付完成後通知主站支付結果。
<iframe id="paymentIframe" src="https://payment.example.com"></iframe>
<script>
var paymentIframe = document.getElementById('paymentIframe').contentWindow;
window.addEventListener('message', function(event) {
if (event.origin === 'https://payment.example.com') {
var paymentStatus = event.data;
if (paymentStatus === 'success') {
// 支付成功處理邏輯
console.log('Payment successful');
} else {
// 支付失敗處理邏輯
console.log('Payment failed');
}
}
}, false);
</script>
案例二：多標籤頁資料同步
在一個實時資料應用中，如股票行情顯示系統，需要在多個標籤頁間同步資料。
// 標籤頁 A 傳送訊息
window.postMessage('Update stock data', 'https://myapp.com');
// 標籤頁 B 接收訊息
window.addEventListener('message', function(event) {
if (event.origin === 'https://myapp.com') {
console.log('Received stock data update:', event.data);
// 更新顯示資料
}
}, false);
八、總結
postMessage 是前端開發中強大且靈活的跨文件通訊工具。透過正確使用 postMessage，可以實現跨域通訊、與 Service Worker 通訊、多視窗通訊等功能。然而，在使用過程中必須注意安全性問題，確保訊息來源可信且內容安全。
透過上述對 postMessage 的詳解，相信你已經掌握瞭如何在實際專案中使用它，以及如何避免常見的安全風險。希望本文對你理解和應用 postMessage 有所幫助。
