数学建模社区-数学中国
标题:
js实现浏览器不同页签之间通信
[打印本页]
作者:
2744557306
时间:
2024-3-29 17:50
标题:
js实现浏览器不同页签之间通信
一. 使用BroadcastChannel
3 y- S* f* n/ b$ _* `
. y9 v) }$ _ \5 q) n! D
const sendMsg = new BroadcastChannel('logout_channel')
2 Q5 y, D5 n# [
sendMsg.postMessage('清除缓存')
' O0 W& g$ j$ r: v" z
onMsg.onmessage = async (event) => {
# k y) X. p) U
console.log('event清除缓存', event.data)
! [ w6 Y0 U# y- K
}
) J" M2 p. H A$ V$ _$ o
' {) C+ N4 H+ ]0 Q) K$ h8 I, C/ p" d4 Z
二. 使用SharedWorker
. G- i {( H4 B) c! v% v
1.创建一个SharedWorker实例，并在其中编写处理消息的代码。
6 L5 g4 @( A, T7 G9 L
6 y) V5 s* t% E' |# g4 q
// shared-worker.js
: s( R0 N L! q. p, K
onconnect = function(e) {
/ j2 U1 l2 V7 f2 Z
var port = e.ports[0];
5 G4 S3 C3 ] ^# I/ a( ^
+ h! T6 l& ?) X5 |) B
port.onmessage = function(e) {
# ^: {5 q) p- E& K/ [0 L* T
var message = e.data;
' }1 | n- N. u! U- W( x
// 在这里处理接收到的消息
$ p. ^: K9 c1 r' G! ^2 R7 u* P$ n5 V
};
$ K; Y h' x3 C% L/ j3 J1 |# A: _
6 f) Q! ^* q6 u/ Q. ^4 P8 V
port.start();
& M, B/ [9 C; c* {- q& C) U
};
- c a0 I3 d& q" S
3 s; v% L3 c7 r5 S: H
在多个窗口中分别创建SharedWorker的端口，并发送消息。
1 Y& c4 l+ z3 T+ d1 Q6 K, c4 |
// window1.js
/ [; F+ T. p5 a
var worker = new SharedWorker('shared-worker.js');
, H6 e0 K9 n7 t& R
var port = worker.port;
! M" b# D5 t ^# y6 z7 n
0 M3 @& `0 u, [2 N- W0 C
port.onmessage = function(e) {
; d" s8 `; `/ ]1 D8 s# J4 U
var message = e.data;
4 F5 Y9 w7 j) E4 ~
// 在这里处理接收到的消息
( g* w4 o4 v# h! G B
};
8 E3 B2 y- ^& ~" J5 [
% W" B% f3 ^( \, X. r# q( @7 ]
port.postMessage('Hello from window1!');
K9 i; @' y; {* N+ [1 x: n7 r
% v" t" T$ V* g! E
// window2.js
' U/ o7 ]" ]: `- |& C& Q- o
var worker = new SharedWorker('shared-worker.js');
+ i1 a3 O, G. f, F. @
var port = worker.port;
: D7 m1 a4 i. w( N! f
, Q, W4 ~. h* Y. }# I
port.onmessage = function(e) {
: ?1 P' b/ }$ v
var message = e.data;
# {5 r) R) H# y) o' a, x# H! r
// 在这里处理接收到的消息
1 }3 r" c. g u, b4 u: \
};
, q0 \' v1 c6 x
/ K8 n( `0 s' f9 _# x0 m
port.postMessage('Hello from window2!');
( w3 N( C7 o# ?1 E+ d [8 ^, ?: v
( k" _/ C- l% n2 j
在SharedWorker中处理接收到的消息，并向所有连接的窗口发送消息。
6 o: g9 w5 U6 _
// shared-worker.js
# Q" t5 }: `3 g! D( _2 b( V2 ?% G
onconnect = function(e) {
" h* C" [! v$ I
var port = e.ports[0];
; Z; p* [# _: _" F6 V3 k
- n) M6 v1 D$ a* _
port.onmessage = function(e) {
9 Y& F& j+ ~2 @+ j
var message = e.data;
$ L4 c W8 w+ h, P( d: f. S; j, M/ p
// 在这里处理接收到的消息
6 p d- @6 l' K% |4 T) B" |! s
4 j Q1 e9 A2 p& v
// 向所有连接的窗口发送消息
* Q1 u" P2 J, S: ~/ X
e.source.postMessage('Hello from SharedWorker!');
' L; p8 n f) l
};
" ?& z, u& R" B5 D
% `3 z: |$ R5 S. v! W
port.start();
7 m! c. z7 x8 J6 D
};
) v. F4 m3 O; {3 _, y v; b, l5 i
+ y9 @, j- ?( {% k8 Q7 R" D# k
1 B: ~8 F% Z5 ?3 y# j
8 ~- b( O) V& Z2 B
欢迎光临 数学建模社区-数学中国 (http://www.madio.net/)
Powered by Discuz! X2.5