HTML - Web 消息传递

你好，未来的网页开发者们！今天，我们将深入探讨一个激动人心的话题，关于如何让你的网页应用的不同部分进行对话。这就像教你的网页如何进行交流一样！让我们一起探索Web消息传递的世界。

HTML - Web Messaging

Web消息传递简介

在我们跳入代码之前，先来了解一下Web消息传递的相关内容。想象一下，你在浏览器的不同标签页中打开了两个网页。通常，这些页面无法直接相互通信。但如果你想要它们共享信息呢？这就是Web消息传递的用武之地！

Web消息传递允许网页应用的不同部分之间发送消息，即使它们来自不同的源（比如不同的域名）。这就好比给你的网页配备了专用的电话线进行聊天！

消息事件

Web消息传递的核心是message事件。当接收到消息时，会触发此事件。让我们一步步分解。

基本结构

以下是一个简单的监听消息的例子：

<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://可信站点.com") return;

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

这个额外的检查确保我们只处理来自我们信任的源的消息。

实际示例

让我们看看一些Web消息传递在实际世界中的场景！

示例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://商店示例.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://商店示例.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消息传递为创建交互性和动态性强的网页应用开辟了无限可能。它允许你的网页生态系统的不同部分之间无缝通信，增强用户体验和功能。

记住，能力越大，责任越大！始终验证消息的源，并且只接受来自可信源的消息。快乐编码，愿你的网页总是进行有吸引力的对话！

方法	描述
`window.postMessage(message, targetOrigin)`	向另一个窗口发送消息
`window.addEventListener("message", function(event) { ... })`	监听传入的消息
`event.data`	包含随消息发送的数据
`event.origin`	指示发送者的源
`event.source`	提供发送者窗口的引用

这个表格总结了我们在Web消息传递旅程中讨论的关键方法和属性。当你开始尝试自己的消息传递实现时，请将其保留手边！

Credits: Image by storyset