postMessage 是一个用于在不同上下文（如主线程与 Web Worker 之间，或多个 iframe 之间）发送消息的方法。它可以在发送方和接收方之间进行异步通信。
以下是几个示例，展示了如何使用 postMessage 函数。
示例 1：主线程与 Web Worker 之间的通信
主线程代码 (main.js)
// 创建一个新的 Worker 实例
const worker = new Worker('worker.js');
// 设置接收消息的事件监听器
worker.onmessage = function(event) {
console.log('Received from worker:', event.data);
};
// 向 Worker 发送消息
worker.postMessage('Hello, Worker!');
Web Worker 代码 (worker.js)
// 接收来自主线程的消息
self.onmessage = function(event) {
console.log('Received from main thread:', event.data);
// 回送一条消息到主线程
self.postMessage(`Worker received: ${event.data}`);
};
示例 2：iframe 与父窗口之间的通信
父窗口代码 (parent.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parent Window</title>
</head>
<body>
<h1>Parent Window</h1>
<iframe id="myFrame" src="child.html"></iframe>
<script>
const iframe = document.getElementById('myFrame');
// 设置接收消息的事件监听器
window.addEventListener('message', function(event) {
console.log('Received from iframe:', event.data);
});
// 向 iframe 发送消息
iframe.contentWindow.postMessage('Hello, Child!', '*');
</script>
</body>
</html>
子窗口代码 (child.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Child Iframe</title>
</head>
<body>
<h1>Child Iframe</h1>
<script>
// 接收来自父窗口的消息
window.addEventListener('message', function(event) {
console.log('Received from parent:', event.data);
// 回送一条消息到父窗口
event.source.postMessage(`Child received: ${event.data}`, event.origin);
});
</script>
</body>
</html>
注意事项
安全性：在实际应用中，应确保只接受来自可信源的数据。在
postMessage的第二个参数中指定目标源，以限制只有特定来源可以接收到该信息。targetWindow.postMessage(message, 'https://trusted-source.com'); // 指定目标源数据类型：通过
postMessage可以传递基本数据类型和对象，但注意不能直接传递 DOM 元素或函数，因为它们不是可序列化的。异步处理：使用
postMessage时，它是异步操作，接收方需要注册事件监听器来处理收到的信息，因此会存在一定延迟。
以上示例展示了如何利用 postMessage 在不同执行上下文之间进行通讯，是理解 JavaScript 中多线程及跨域通讯的重要部分。
内容由零声教学AI助手提供，问题来源于学员提问
