以下是原文翻译成繁體中文的版本：

HTML - Web Messaging

# HTML - Web Messaging

你好，未來的網頁開發者！今天，我們將要深入一個令人興奮的主題，這個主題關於讓你的網頁應用程序的不同部分相互對話。這就像教你的網頁如何進行對話一樣！讓我們一起探索Web Messaging的世界。

## Web Messaging簡介

在我們投入代碼之前，讓我們先了解Web Messaging是什麼。想像一下，你正在瀏覽器的不同標籤頁中打開兩個網頁。正常情況下，這些頁面無法直接相互通信。但是，如果你想要它們共享信息呢？這就是Web Messaging的用武之地！

Web Messaging允許網頁應用程序的不同部分相互發送消息，即使它們來自不同的源（如不同的域名）。這就像給你的網頁一條專用的電話線來聊天！

## 消息事件

Web Messaging的核心是`message`事件。當接收到消息時，會觸發此事件。讓我們一步步分解。

### 基本結構

以下是如何聽取消息的簡單示例：

```html
<script>
window.addEventListener("message", function(event) {
    console.log("從 " + event.origin + " 收到消息");
    console.log("消息內容: " + event.data);
});
</script>

讓我們解碼這段代碼：

我們使用window.addEventListener來聽取"message"事件。
當消息到達時，我們的函數會被調用。
函數接收一個event對象，其中包含有關消息的信息。
我們記錄消息的源和其內容。

發送消息

現在，讓我們看看如何發送消息：

<script>
// 假設我們想要向 id 為 'myFrame' 的 iframe 發送消息
var iframe = document.getElementById('myFrame');
iframe.contentWindow.postMessage("從父頁面問候！", "*");
</script>

在這個示例中：

我們獲取頁面上iframe的引用。
我們使用postMessage向該iframe發送消息。
第一個參數是消息內容。
第二個參數 "*" 意味著我們允許消息發送到任何源。在實際應用程序中，你應該指定確切的源，出於安全原因。

安全考慮

總是記得檢查來消息的源！以下是我們消息監聽器的更安全版本：

<script>
window.addEventListener("message", function(event) {
    // 檢查消息是否來自可信來源
    if (event.origin !== "https://trusted-site.com") return;

    console.log("收到可信消息: " + event.data);
});
</script>

這個額外的檢查確保我們只處理來自我們信任的源的消息。

實際範例

讓我們看看一些Web Messaging發揮作用的真實世界場景！

範例1：頁面與iframe之間的通信

想像一下，你有一個主頁面在iframe中加載了一個遊戲。你希望當按鈕被點擊時，主頁面啟動遊戲。

主頁面（parent.html）：

<!DOCTYPE html>
<html>
<body>
<button onclick="startGame()">啟動遊戲</button>
<iframe id="gameFrame" src="game.html"></iframe>

<script>
function startGame() {
    var gameFrame = document.getElementById('gameFrame');
    gameFrame.contentWindow.postMessage("start", "*");
}

window.addEventListener("message", function(event) {
    if (event.data === "gameOver") {
        alert("遊戲結束！你的得分已經記錄。");
    }
});
</script>
</body>
</html>

遊戲頁面（game.html）：

<!DOCTYPE html>
<html>
<body>
<h1>超棒遊戲</h1>
<div id="gameArea">遊戲將馬上開始...</div>

<script>
window.addEventListener("message", function(event) {
    if (event.data === "start") {
        document.getElementById('gameArea').innerHTML = "遊戲正在運行！";
        // 模擬遊戲結束，5秒後
        setTimeout(function() {
            window.parent.postMessage("gameOver", "*");
        }, 5000);
    }
});
</script>
</body>
</html>

在這個示例中：

主頁面有一個按鈕來啟動遊戲。
當按鈕被點擊時，它向iframe發送一個"start"消息。
遊戲頁面聽取這個消息並開始遊戲。
當遊戲結束時，它向父頁面發送一個"gameOver"消息。
當父頁面接收到"gameOver"消息時，顯示一個提示。

範例2：跨窗口通信

舉例來說，你在一個頁面上有一個購物車，在另一個頁面上有產品詳情。你希望從產品頁面添加物品到購物車。

產品頁面（product.html）：

<!DOCTYPE html>
<html>
<body>
<h1>驚艷產品</h1>
<button onclick="addToCart()">加入到購物車</button>

<script>
function addToCart() {
    window.opener.postMessage({
        action: "addToCart",
        product: "驚艷產品",
        price: 19.99
    }, "https://shop.example.com");
}
</script>
</body>
</html>

購物車頁面（cart.html）：

<!DOCTYPE html>
<html>
<body>
<h1>你的購物車</h1>
<ul id="cartItems"></ul>

<script>
window.addEventListener("message", function(event) {
    if (event.origin !== "https://shop.example.com") return;

    if (event.data.action === "addToCart") {
        var cartList = document.getElementById('cartItems');
        var newItem = document.createElement('li');
        newItem.textContent = event.data.product + " - $" + event.data.price;
        cartList.appendChild(newItem);
    }
});
</script>
</body>
</html>

在這個場景中：

產品頁面有一個"加入到購物車"的按鈕。
當按鈕被點擊時，它向購物車頁面（假設是打開者的窗口）發送消息。
購物車頁面聽取消息，並在收到時將產品添加到列表中。

結論

Web Messaging為創建有交互性和動態性的網頁應用程序打開了無限可能。它讓你的網頁應用程序的不同部分能夠無縫通信，增強用戶體驗和功能。

記住，能力越大，責任越大！總是驗證消息的源，並只接受來自可信來源的消息。開心編程，願你的網頁總是能夠進行引人入勝的對話！

方法	描述
`window.postMessage(message, targetOrigin)`	向另一個窗口發送消息
`window.addEventListener("message", function(event) { ... })`	聽取進來的消息
`event.data`	包含隨消息發送數據
`event.origin`	指示發送者的源
`event.source`	提供發送者窗口的引用

這個表格總結了我們在Web Messaging旅程中討論的關鍵方法和屬性。當你開始嘗試自己的消息實現時，請將它放在手邊！

Credits: Image by storyset