js实现浏览器不同页签之间通信

2744557306

一. 使用BroadcastChannel
$ l; q, L( Z8 y# l3 H  C: Z- I
const sendMsg = new BroadcastChannel('logout_channel')
sendMsg.postMessage('清除缓存')
+ ]$ m5 m6 o2 n* conMsg.onmessage = async (event) => {
   console.log('event清除缓存', event.data)
' N8 l7 y$ A. k}
9 r# V$ j: c" p1 D$ ]# R
二. 使用SharedWorker
1.创建一个SharedWorker实例，并在其中编写处理消息的代码。

// shared-worker.js
% p1 U" z7 s. Y$ T- Jonconnect = function(e) {
1 J/ X& M9 J) a  var port = e.ports[0];

  port.onmessage = function(e) {
    var message = e.data;
    // 在这里处理接收到的消息
  };
- J. }  ~! N6 Z1 B! T
  port.start();
0 H. C5 S& i' {; ^# ~};
2 x5 d' @9 O, F7 |# h. R8 e4 @
在多个窗口中分别创建SharedWorker的端口，并发送消息。
, C% @5 y1 N# B5 C& c% z// window1.js
var worker = new SharedWorker('shared-worker.js');
$ g( j3 q, t0 Z, O8 w/ U9 Ovar port = worker.port;
) r8 ?" l4 k4 |% G$ i; \; y% m# N: }2 P
) y* j* I9 z0 r# d/ j& L- Eport.onmessage = function(e) {
  var message = e.data;
  // 在这里处理接收到的消息
};

port.postMessage('Hello from window1!');

// window2.js
var worker = new SharedWorker('shared-worker.js');
4 G; B- }7 }% \) v! a7 T1 nvar port = worker.port;
( J# r2 k% h. {! P" b/ P7 S4 B
port.onmessage = function(e) {
' X$ o. M/ h2 M! U! W- O% m  var message = e.data;
  // 在这里处理接收到的消息
/ I0 h" l! p5 s! ~' n! E};

; D3 k! A- a: r$ rport.postMessage('Hello from window2!');
0 q2 E& o# F3 U
在SharedWorker中处理接收到的消息，并向所有连接的窗口发送消息。
// shared-worker.js
onconnect = function(e) {
  k( I& U6 g- F8 o  var port = e.ports[0];
6 ~; w" v) O% }4 V1 |8 {$ ]0 M
  port.onmessage = function(e) {
    var message = e.data;
% ^9 P3 A9 c0 J2 d' p  Q" I% L: v    // 在这里处理接收到的消息

    // 向所有连接的窗口发送消息
' Z; O' W# ^& P2 X    e.source.postMessage('Hello from SharedWorker!');
  };

  port.start();
};


! E3 w  Q4 }2 \' B! z7 {
9 r. g: U4 f! e. d- P# s5 a