跨页面通信我又学会一招

MessageChannel 是一种在 JavaScript 中用于在不同执行上下文（如不同的 Web Worker 或同一页面中的不同脚本）之间进行通信的机制。以下是关于 MessageChannel 的详细介绍：

一、基本概念

MessageChannel 创建了一个通信管道，包含两个端口：port1 和 port2。可以在一端通过一个端口发送消息，然后在另一端通过对应的端口接收消息。

二、使用方法

1. 创建 MessageChannel

   const channel = new MessageChannel();
   const port1 = channel.port1;
   const port2 = channel.port2;

2. 在发送消息的一端

   port1.postMessage('Hello from port1!');
   port1.onmessage = function(event) {
       console.log('Received on port1:', event.data);
   };

3. 在接收消息的一端

port2.onmessage = function(event) { 
    console.log('Received on port2:', event.data); 
}; 
port2.postMessage('Hello from port2!');

三、在不同场景下的应用

1. 父子页面通信

   • 在父页面中创建 MessageChannel，然后将其中一个端口传递给子页面。
   • 子页面通过接收到的端口与父页面进行通信。

   <!-- 父页面 -->
   <iframe src="child.html" id="childFrame"></iframe>
   <script>
       const channel = new MessageChannel();
       const childFrame = document.getElementById('childFrame');
       childFrame.contentWindow.postMessage('init', '*', [channel.port2]);
       channel.port1.onmessage = function(event) {
           console.log('Received from child:', event.data);
       };
   </script>

   <!-- 子页面 -->
   <script>
       window.onmessage = function(event) {
           const port = event.ports[0];
           port.postMessage('Hello from child!');
           port.onmessage = function(event) {
               console.log('Received in child:', event.data);
           };
       };
   </script>

2. Web Worker 通信

   • 在主线程中创建 MessageChannel，并将一个端口传递给 Web Worker。
   • Web Worker 通过接收到的端口与主线程进行通信。

   // 主线程
   const worker = new Worker('worker.js');
   const channel = new MessageChannel();
   worker.postMessage('init', [channel.port2]);
   channel.port1.onmessage = function(event) {
       console.log('Received from worker:', event.data);
   };

   // worker.js
   self.onmessage = function(event) {
       const port = event.ports[0];
       port.postMessage('Hello from worker!');
       port.onmessage = function(event) {
           console.log('Received in worker:', event.data);
       };
   };

四、注意事项

1. 确保在正确的时机发送和接收消息，避免出现消息丢失或顺序混乱的情况。
2. 当不再需要使用 MessageChannel 时，及时清理相关的事件监听器，以避免内存泄漏。

通过以上介绍，你应该对 MessageChannel 有了一定的了解。在实际应用中，可以根据具体的需求灵活使用 MessageChannel 进行不同执行上下文之间的通信。