javascript postMessage函数用法示例-Go服务器开发

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 时，它是异步操作，接收方需要注册事件监听器来处理收到的信息，因此会存在一定延迟。