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

2744557306

一. 使用BroadcastChannel
* [) t$ T; J( L  ]7 O4 D4 g/ P2 t
. B0 `& N! T+ P: xconst sendMsg = new BroadcastChannel('logout_channel')
sendMsg.postMessage('清除缓存')
0 p1 k3 G% p6 {$ L, lonMsg.onmessage = async (event) => {
   console.log('event清除缓存', event.data)
8 \+ s2 x9 ]5 U6 _8 ]& `* F}
5 Q" Q/ S; f: l/ H. g( l( a4 Z2 y
二. 使用SharedWorker
; A2 c- @- ^% n1.创建一个SharedWorker实例，并在其中编写处理消息的代码。

// shared-worker.js
onconnect = function(e) {
  var port = e.ports[0];

  port.onmessage = function(e) {
    var message = e.data;
    // 在这里处理接收到的消息
4 v+ d. ]1 C& l7 A) D! o+ L% h( s  };
, \* E8 l8 l% C
  port.start();
1 O% ]( U. h) K' }5 ^};
' z$ Q, E6 d! I# k
* ~" ?7 d+ _1 t7 E3 m/ w在多个窗口中分别创建SharedWorker的端口，并发送消息。
// window1.js
var worker = new SharedWorker('shared-worker.js');
$ k0 v/ l$ C  Zvar port = worker.port;
4 H+ l  W9 l1 K/ A8 u6 l* U' o/ }
" l) W! Z" g0 I# d# v0 Uport.onmessage = function(e) {
$ c2 _) i8 r* a+ ]4 K, s% Q7 r  var message = e.data;
  // 在这里处理接收到的消息
};

! M+ a/ `% r/ a4 bport.postMessage('Hello from window1!');

// window2.js
var worker = new SharedWorker('shared-worker.js');
var port = worker.port;

" u+ L6 x2 @) n4 l/ |port.onmessage = function(e) {
  var message = e.data;
3 P. e" H# ?* e+ \  // 在这里处理接收到的消息
" C# D: i6 ]: N- x8 z. _; r. d};
/ v4 E. ^: H' P- S
. J1 C% q& s  C2 T& ]. ^* \port.postMessage('Hello from window2!');

在SharedWorker中处理接收到的消息，并向所有连接的窗口发送消息。
9 e6 C: _+ M; u& S; x// shared-worker.js
  O* U7 K' K! S6 h8 O$ yonconnect = function(e) {
  var port = e.ports[0];

- E7 o- |9 P* p5 k& g/ t7 z  port.onmessage = function(e) {
, z9 M) N2 ^' i3 E! Z$ i    var message = e.data;
, y6 I$ s. Z( Q    // 在这里处理接收到的消息
# d( W7 B# z# n) l* P
* K" B' \3 ?# a    // 向所有连接的窗口发送消息
    e.source.postMessage('Hello from SharedWorker!');
6 P, N1 b# |4 w, |. b5 I. b  };
6 }* u0 ^1 ~% b/ s+ E: P: C
( U$ j! x8 a4 G0 f( i/ U; J  e  port.start();
};

2 d$ @' `0 i( w, M
( _6 L9 ~, k/ R  a
& H" S& S. }2 A2 v; A1 k